1. Defina una función para obtener el estilo actual del elemento especificado

			* 定义一个函数，用来获取指定元素的当前的样式
			 * 参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
			function getStyle(obj , name){
    
    
				
				if(window.getComputedStyle){
    
    
					//正常浏览器的方式，具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
    
    
					//IE8的方式，没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
				
			}

2. Cree una función que pueda realizar animaciones simples

//尝试创建一个可以执行简单动画的函数
/*
 * 参数：
 * 	obj:要执行动画的对象
 * 	attr:要执行动画的样式，比如：left top width height
 * 	target:执行动画的目标位置
 * 	speed:移动的速度(正数向右移动，负数向左移动)
 *  callback:回调函数，这个函数将会在动画执行完毕以后执行
 */
function move(obj, attr, target, speed, callback) {
    
    
	//关闭上一个定时器
	clearInterval(obj.timer);

	//获取元素目前的位置
	var current = parseInt(getStyle(obj, attr));

	//判断速度的正负值
	//如果从0 向 800移动，则speed为正
	//如果从800向0移动，则speed为负
	if(current > target) {
    
    
		//此时速度应为负值
		speed = -speed;
	}

	//开启一个定时器，用来执行动画效果
	//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
	obj.timer = setInterval(function() {
    
    

		//获取box1的原来的left值
		var oldValue = parseInt(getStyle(obj, attr));

		//在旧值的基础上增加
		var newValue = oldValue + speed;

		//判断newValue是否大于800
		//从800 向 0移动
		//向左移动时，需要判断newValue是否小于target
		//向右移动时，需要判断newValue是否大于target
		if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
    
    
			newValue = target;
		}

		//将新值设置给box1
		obj.style[attr] = newValue + "px";

		//当元素移动到0px时，使其停止执行动画
		if(newValue == target) {
    
    
			//达到目标，关闭定时器
			clearInterval(obj.timer);
			//动画执行完毕，调用回调函数
			callback && callback();
		}

	}, 30);
}

3. Código

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
    
    
				margin: 0;
				padding: 0;
			}
			
			#box1{
    
    
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
    
    
				
				//获取box1
				var box1 = document.getElementById("box1");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//获取btn02
				var btn02 = document.getElementById("btn02");
				
				
				//点击按钮以后，使box1向右移动（left值增大）
				btn01.onclick = function(){
    
    
					move(box1 , 800 , 10);
				};
				
				
				//点击按钮以后，使box1向左移动（left值减小）
				btn02.onclick = function(){
    
    
					move(box1 , 0 , 10);
				};
				
			};
			
			//定义一个变量，用来保存定时器的标识
			var timer;
			
			//尝试创建一个可以执行简单动画的函数
			/*
			 * 参数：
			 * 	obj:要执行动画的对象
			 * 	target:执行动画的目标位置
			 * 	speed:移动的速度(正数向右移动，负数向左移动)
			 */
			function move(obj , target ,speed){
    
    
				//关闭上一个定时器
				clearInterval(timer);
				
				//获取元素目前的位置
				var current = parseInt(getStyle(obj,"left"));
				
				//判断速度的正负值
				//如果从0 向 800移动，则speed为正
				//如果从800向0移动，则speed为负
				if(current > target){
    
    
					//此时速度应为负值
					speed = -speed;
				}
				
				//开启一个定时器，用来执行动画效果
				timer = setInterval(function(){
    
    
					
					//获取box1的原来的left值
					var oldValue = parseInt(getStyle(obj,"left"));
					
					//在旧值的基础上增加
					var newValue = oldValue + speed;
					
					//判断newValue是否大于800
					//从800 向 0移动
					//向左移动时，需要判断newValue是否小于target
					//向右移动时，需要判断newValue是否大于target
					if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
    
    
						newValue = target;
					}
					
					//将新值设置给box1
					obj.style.left = newValue + "px";
					
					//当元素移动到0px时，使其停止执行动画
					if(newValue == target){
    
    
						//达到目标，关闭定时器
						clearInterval(timer);
					}
					
					
				},30);
			}
			
			
			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
			function getStyle(obj , name){
    
    
				
				if(window.getComputedStyle){
    
    
					//正常浏览器的方式，具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
    
    
					//IE8的方式，没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
				
			}
			
			
		</script>
	</head>
	<body>
		
		<button id="btn01">点击按钮以后box1向右移动</button>
		<button id="btn02">点击按钮以后box1向左移动</button>
		
		<br /><br />
		
		<div id="box1"></div>
		
		<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
		
	</body>
</html>

El temporizador controla el movimiento div, encapsula funciones comunes dinámicas

El temporizador controla el movimiento del div, creando una función que puede realizar animaciones simples

1. Defina una función para obtener el estilo actual del elemento especificado

2. Cree una función que pueda realizar animaciones simples

3. Código

Supongo que te gusta