JavaScript运动知识

于 2016-08-12 22:11:04 发布
阅读量334 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javaScript 文章标签： JavaScript一般运动 缓冲运动 多物体运动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxn11140/article/details/52195781
本文详细介绍JavaScript中的运动框架实现，包括匀速运动与缓冲运动的基本原理和实现方式，并演示了如何应用这些技术使多个对象进行精确的动画效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

						JavaScript
一、	运动基础
关于JavaScript的运动，我们可以通过一个小小的div的运动来说明
步骤：
1、	样式要设置为绝对定位
2、	添加定时器
3、	使div.style.left = div.offsetLeft+speed+”px”;


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
#div1{width:100px;height:100px;background: red;position:absolute;left:0px;top:50px}
</style>
<script>
window.onload = function()
{
 	var timer = null;
 	var speed = 7;
	var oBtn = document.getElementById("btn");
	var oDiv = document.getElementById("div1");
	oBtn.onclick = function()
	{
		 
		timer = setInterval(function()
		{
			if(oDiv.offsetLeft >= 300)
			{
				clearInterval(timer);
			}
			 
 		    	oDiv.style.left = oDiv.offsetLeft+speed+"px";
		 
		},100);
	}
}
</script>
</head>
<body>
	<input id = "btn" type = "button" value = "开始"/>
	<div id = "div1"></div>
</body>
</html>



需要注意的几个问题：
1、	停在指定位置：判断div.offsetLeft 
2、	有时到达指定位置不停止：因为speed可能刚好跳过判断条件。如：speed=7，指定位置是100，但是div.offsetLeft 不会等于100,这样使得物体互惠停止。
解决方案：判断条件改为：div.offsetLeft>=指定位置
3、	到达指定位置后再点击按钮还是可以运动：因为onclick事件至少会执行一次。
解决方案：使用if/else语句
4、	重复点击按钮div会加速：因为之前的定时器还在工作，点击按钮会再开启新的定时器。即：开启了多个定时器。
解决方案：在每次执行onclick事件函数执行时都要clearInterval(timer)，保证只有一个定时器;

代码修改如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
#div1{width:100px;height:100px;background: red;position:absolute;left:0px;top:50px}
</style>
<script>
window.onload = function()
{
 	var timer = null;
 	var speed = 7;
	var oBtn = document.getElementById("btn");
	var oDiv = document.getElementById("div1");
	oBtn.onclick = function()
	{
		clearInterval(timer);
		timer = setInterval(function()
		{
			if(oDiv.offsetLeft >= 300)
			{
				clearInterval(timer);
			}
			else
			{
 		    	oDiv.style.left = oDiv.offsetLeft+speed+"px";
			}
		},100);
	}
}
</script>
</head>
<body>
	<input id = "btn" type = "button" value = "开始"/>
	<div id = "div1"></div>
</body>
</html>

注意！这是个匀速运动
二、	缓冲运动
上面小小的例子是匀速运动，相对于匀速运动，缓冲运动是变速运动！
缓冲运动的特点：
距离大，速度大 ；距离小，速度小 。
速度由距离决定。速度、距离成正比
速度 = （目标值-当前值）/缩放系数
（当然，速度也可以由其他决定，这不过是一种思路，不过大多数运用这个就可以了）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
#div1{width:100px;height:100px;background: red;position:absolute;left:0px;top:50px}
#div2{width:1px;height:500px;background: blue;position:absolute;left:300px;top:50px}
</style>
<script>
window.onload = function(){
	var oDiv = document.getElementById("div1");
	var oBtn1 = document.getElementById("btn1");
	var oBtn2 = document.getElementById("btn2");
	
	oBtn1.onclick = function(){
		startMove(300);
	}
	oBtn2.onclick = function(){
		startMove(0);
	}
	
}
	var timer = null;
 
	function startMove(iTarget){
		var oDiv = document.getElementById("div1");
		
		clearInterval(timer);
		timer = setInterval(function()
		{
			document.title = oDiv.offsetLeft;
  			var speed = (iTarget-oDiv.offsetLeft)/10;
 			 
 	 		if(oDiv.style.left ==iTarget){
	 			clearInterval(timer);
 	 		}else{
	 			oDiv.style.left = oDiv.offsetLeft + speed + "px";
	 		}
		})
		 
	}
</script>
</head>
<body>
	<input id = "btn1" type = "button" value = "开始"/>
	<input id = "btn2" type = "button" value = "回退"/>
	<div id = "div1"></div>
	<div id = "div2"></div>
</body>
</html>

注意：1、div并不能真正停在指定位置。因为当速度不足整数时，即随着div的运动，speed会越来越小。当speed = (300-obj.offsetLeft)/10--->后面出现小数——》如：0.9，会默认为speed=0， 停止运动。如下图：标题上的是oDiv.offsetLeft = 296，而不是300
<img src="https://img-blog.csdn.net/20160812221345390?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
 
解决方案：

Math.ceil(数)  向上取整 如：0.9——》1    向右运动  speed = Math.ceil(speed)
Math.floor(数)   向下取整如：-0.9——》-1 向左运动(负数)  speed = Math.floor(speed)
2、可以运用   ？：  来代替if做判断
speed = (iTarget-oDiv.offsetLeft)/1；
	speed = (iTarget-oDiv.offsetLeft)>0? Math.ceil(speed): Math.floor(speed);

修改startMove函数为：
function startMove(iTarget){
		var oDiv = document.getElementById("div1");
		
		clearInterval(timer);
		timer = setInterval(function()
		{
			document.title = oDiv.offsetLeft;
			speed = (iTarget-oDiv.offsetLeft)/10;
			speed = (iTarget-oDiv.offsetLeft)>0? Math.ceil(speed): Math.floor(speed);
			/*
	 		if(oDiv.offsetLeft<iTarget){
				var speed = (iTarget-oDiv.offsetLeft)/10;
				 speed = Math.ceil(speed);
 			}else{
 				var speed = (iTarget-oDiv.offsetLeft)/10;
				 speed = Math.floor(speed);
			}
	 		*/
	 		if(oDiv.style.left ==iTarget){
	 			clearInterval(timer);
 	 		}else{
	 			oDiv.style.left = oDiv.offsetLeft + speed + "px";
	 		}
		})
		 
	}

修改后的图片：
<img src="https://img-blog.csdn.net/20160812221410647?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
 


三、	多物体的运动



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
div{width:100px;height:50px;background: blue;margin: 10px;}
#div1{filter:alpha(opacity:40);opacity:0.4}
</style>
<script>
alert(0.07*100);
window.onload = function()
{
	var aDiv = document.getElementsByTagName("div");
 	for(var i =0;i<aDiv.length;i++){
		 
		aDiv[i].onmouseover = function(){
			startMove(this,400);
  		}
		aDiv[i].onmouseout = function(){
			startMove(this,80);
 		}
	 
	}
}
  var timer = null;
	function startMove(object,iTarget){
		clearInterval(timer);
 		object.timer = setInterval(function()
		{
 			var speed = (iTarget-object.offsetWidth)/5;
			speed = speed>0?Math.ceil(speed):Math.floor(speed);
			 
 			if(object.offsetWidth == iTarget){
				clearInterval(timer);
			}else{
				object.style.width = object.offsetWidth + speed + "px"; 
			}
		},30)
	}
 
    function getStyle(obj,attr)
 	{
	 	if(obj.currentStyle){
	 		return obj.currentStyle[attr];
	 	}else{
	 		return getComputedStyle(obj,false)[attr];
	 	}
    }
 
</script>
</head>
<body>
	<div></div>
	<div></div>
	<div> </div>
	<div></div>
</body>
</html>
运行后的图片

 
！！！所有物体不能共用，不然会有冲突，div还没恢复原状，定时器就被关闭
<img src="https://img-blog.csdn.net/20160812221643619?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

属性与运动对象绑定：速度、其他属性
让每个div都有自己的定时器！！，在for循环时：aDiv[i].timer = null;   之后在函数中引用时：object.timer

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值