js基础运动-缓冲运动

最新推荐文章于 2020-03-19 08:33:25 发布

zhanjiejiaoxiangni

最新推荐文章于 2020-03-19 08:33:25 发布

阅读量215

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/zhanjiejiaoxiangni/article/details/83154546

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

js缓冲运动的原理：距离终点越近，速度越慢


    <!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		#div1{
			width:100px;
			height:100px;
			position:absolute;
			left:0px;
			top:100px;
			background:red;
		}
		
		#div2{
			width:1px;
			height:200px;
			left:300px;
			top:50px;
			position:absolute;
			background:black;
			
		}
		
	</style>
	<script>
		/**js运动基础--缓冲运动*/
		
		//定义一个定时器
		var timer = null;
		function startMove(){
			var oDiv = document.getElementById('div1');
			var oDiv2 = document.getElementById('div2');
			
			var speed = null;
			
			timer = setInterval(function(){
				document.title = oDiv.offsetLeft;
				if(oDiv.offsetLeft<oDiv2.offsetLeft){
					speed = Math.ceil((oDiv2.offsetLeft - oDiv.offsetLeft)/10);
				}else{
					speed = Math.floor((oDiv2.offsetLeft - oDiv.offsetLeft)/10);
				}
				
				oDiv.style.left = oDiv.offsetLeft + speed + 'px';
			
			},30);
			
			
		};
	</script>
</head>
<body>
	<input type="button" value ="开始运动" id ="btn1" onclick = "startMove();"/>
	
	<div id="div1">
			
			
	</div>
	<div id ="div2"></div>
	
	
</body>
</html>