js 缓冲运动效果

灰太狼 2022-06-13 22:45 168阅读 0赞

缓冲需要用到数值取整，向上取整:Math.ceil()  向下取整Math.floor()

移动的速度慢慢减慢的效果，移动速度=(终点位置 - 当前位置) / 一个数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    #div{
    	width:150px;
    	height:150px;
    	background:#0C6;
    	position:absolute;
    	left:0;
    	top:50px;
    }
    #div2{
    	background:#000;
    	height:600px;
    	position:absolute;
    	left:500px;
    	width:2px;
    }
    </style>
    </head>
    
    <script>
    var speed;
    var time;
    window.onload = function(){
    	var btn = document.getElementById('btn');
    	btn.onclick = function(){
    		speed = 0;
    		move(500);
    	};
    	btn2.onclick = function(){
    		speed = 0;
    		move(0);
    	};
    };
    function move(e){
    	var div = document.getElementById('div');
    	clearInterval(time);
    	time = setInterval(function(){
    		//改变位置，如果向左则e==500， 向上取整， 否则向右，向下取整，速度=(终点位置 - 当前位置)/一个数
    		e==500 ? speed = Math.ceil((e-(div.offsetLeft))/30):speed = Math.floor((e-(div.offsetLeft))/30)
    		if (e <= div.style.left){//达到，关闭定时器
    			clearInterval(time);
    		}
    		else
    		{
    			div.style.left = div.offsetLeft+speed+'px';
    		}
    	},30);
    };
    </script>
    
    <body>
    <input type="button" value="向右运动" id="btn" />
    <input type="button" value="向左运动" id="btn2" />
    <div id = "div">
    </div>
    <div id = "div2">
    </div>
    </body>
    </html>