当前位置:澳门贵宾厅 > www.vip8888.com > 当计算出来的速度有小数时需要取整
当计算出来的速度有小数时需要取整
2020-01-04

手机版澳门贵宾厅,本文实例讲述了JavaScript缓冲运动实现方法。分享给大家供大家参考,具体如下:

澳门贵宾厅,实现原理: / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比)复制代码 代码如下:(500 - oDiv.offsetLeft) / 7 = iSpeed;

需要注意:当计算出来的速度有小数时需要取整;复制代码 代码如下:(500 - oDiv.offsetLeft) / 7 = iSpeed; iSpeed = iSpeed>0?Math.ceil:Math.floor;

缓冲运动#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}window.onload = function(){ var oBtn = document.getElementById; var oDiv = document.getElementById; oBtn.onclick = function() { startMove; };};var timer = null;function startMove{ clearInterval; timer = setInterval{ var iSpeed = (iTarget - obj.offsetLeft)/8; iSpeed = iSpeed>0?Math.ceil:Math.floor; if(iTarget==obj.offsetLeft){ clearInterval; }else{ obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30);}

侧边栏滑动#div1{ width:100px; height:100px; background:red; position:absolute; right:0; top:0;}window.onload = window.onscroll = function(){ var oDiv = document.getElementById; var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop; var clientHeight = document.documentElement.clientHeight; var iH = (clientHeight - oDiv.offsetHeight)/2 + iScrollTop; //oDiv.style.top = iH + 'px'; startMove;};var timer = null;function startMove{ clearInterval; timer = setInterval{ var iSpeed = (iTarget - obj.offsetTop) / 8; iSpeed = iSpeed>0?Math.ceil:Math.floor; if(obj.offsetTop == iTarget){ clearInterval; }else{ obj.style.top = obj.offsetTop + iSpeed + 'px'; } }, 30);}

更多关于JavaScript运动效果相关内容可查看本站专题:《JavaScript运动效果与技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。