按钮控制div移动方向

最新推荐文章于 2023-11-02 20:30:16 发布

w18789476022

最新推荐文章于 2023-11-02 20:30:16 发布

阅读量748

点赞数 1

分类专栏： JS笔记涉及代码文章标签： js

本文链接：https://blog.csdn.net/w18789476022/article/details/109537761

版权

这篇博客主要介绍了如何使用JavaScript来实现对Div元素的移动控制，包括单个Div和多个Div的移动操作，通过调用move()函数实现不同方向的动画效果。

摘要由CSDN通过智能技术生成

1.控制一个div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
   
				margin: 0;
				padding: 0;
			}

			#box1 {
   
				width: 6.25rem;
				height: 6.25rem;
				background-color: orangered;
				position: absolute;
				left: 0;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
   
					var btn = document.getElementById("btn");
					var btn02 = document.getElementById("btn02");
					var box1 = document.getElementById("box1");


					//点击按钮后，box1向右移动(left值增大)
					btn.onclick = function(event) {
   
						event = event || window.event;
						move(box1,800,10);

					};
					btn02.onclick = function() {
   
						move(box1, 0, 10);
					};

					var timer;
					/*
					 *尝试创建一个可以简单动画的函数
					 * 参数 obj要执行动画的对象
					 * 		target:执行动画的目标位置
					 * 	   speed：移动的速度
					 */
					function move(obj, target, speed) {
   
						//关闭上一次的计时器，否则每按一次button，每开启一个计时器，此时速度不像设置的那样
						clearInterval(timer);
						var current = parseInt(getStyle(obj, "left"));
						//判断速度的正负值
						if(current>target){
   
							speed=-speed;
						}
						timer = setInterval(