<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>缓冲运动</title> <style type="text/css"> #divMove { width: 100px; height: 100px; position: absolute; top: 200px; left:0px; background: red; } </style> </head> <script type="text/javascript"> window.onload = function() { //获取对象 var oDivMove = document.getElementById("divMove"); var oBtnMove = document.getElementById("btnMove"); oBtnMove.onclick = function() { oDivMove.offsetLeft==0?startMove(oDivMove, 600):startMove(oDivMove, 0);//假设left是0就往右走,否则就往左走 }; }; var oTimer = null; //定时器 function startMove(obj, iTarget) { clearInterval(oTimer); //关闭定时器 oTimer = setInterval(function() { var iSpeed = (iTarget - obj.offsetLeft) / 10; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);//速度取整数,防止前后波动 if (obj.offsetLeft == iTarget) {//推断是否到达终点 clearInterval(oTimer); //关闭定时器 } else { obj.style.left = obj.offsetLeft + iSpeed + "px";//层运动 document.getElementById("divMove").innerHTML = "速度:"+iSpeed+'</br>'+'距离:'+obj.offsetLeft + "px"; }; }, 30); } </script> <body> <div id="divMove"> </div> <input type="button" id="btnMove" value="開始运动" /> </body> </html>
层的缓冲运动
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:Service启动模式
下一篇:图像全參考客观评价算法比較
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
原生JS实现各种运动之缓冲运动
分享一个用原生JS实现的缓冲运动的小Demo,效果如下:以下是代码实现,欢迎大家复制粘贴及吐槽。<!DOCTYPE html>
前端开发 JavaScript html Math javascript