JS的缓冲运动

来源:互联网 发布:淘宝怎么出售游戏账号 编辑:程序博客网 时间:2024/04/28 02:09
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>arguments</title><meta name="keyword" content=""/><meta name="description" content=""/><meta name="viewport" content="width=device-width"/><style type="text/css">#div1{width:100px;height:100px;background-color: red;position: absolute;left:800px;top:100px;}</style></head><body><div id="div1">1</div><input type="button" value="开始" id="button"/><script type="text/javascript">function move(){  var odiv=document.getElementById('div1');  setInterval(function () {var speed= (300-odiv.offsetLeft)/10;// Math.ceil是向上取整。而Math.floor是向下取整。。 if (speed>0){                        //缓冲运动必须要谨记取整 speed=Math.ceil(speed) }else{ speed=Math.floor(speed) } odiv.style.left=odiv.offsetLeft+speed+'px';  document.title=odiv.offsetLeft+','+speed  //用来验证 odiv移动的距离和速度},30);             }var obutton=document.getElementById('button');obutton.addEventListener('click',move,false)</script></body></html>