web开发中基于匀速运动的示例分析
这篇文章主要介绍web开发中基于匀速运动的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联是一家专业提供兰陵企业网站建设,专注与成都网站建设、网站制作、html5、小程序制作等业务。10年已为兰陵众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
javascript中,如何让一个元素(比如div)运动起来呢?
设置基本的样式,一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 );
基本的结构:
当我们点击,这个按钮的时候,要让div运动起来,其实就是让div的left值持续变化,那么div就会产生运动效果,我们先让left改变,再让他持续改变
window.onload = function(){ var oBtn = document.querySelector( "input" ), oBox = document.querySelector( '#box' ); oBtn.onclick = function(){ oBox.style.left = oBox.offsetLeft + 10 + 'px'; } }
那么每当我点击按钮的时候,div的left值就会在原来的基础上加上10px。这里也可以用获取非行间样式的方法获取left的值再加上10px,也可以达到效果
function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } window.onload = function () { var oBtn = document.querySelector("input"), oBox = document.querySelector('#box'); oBtn.onclick = function () { oBox.style.left = parseInt( css( oBox, 'left' ) ) + 10 + 'px'; } }
offsetLeft与获取非行间样式left的值 有什么区别呢?
offsetLeft没有px单位,而left是有px单位的
oBtn.onclick = function () { // alert( css( oBox, 'left' ) ); //0px alert( oBox.offsetLeft ); //0 }
现在div是点击一下动一下,我们让他持续动起来,怎么做? 加上定时器
oBtn.onclick = function () { setInterval( function(){ oBox.style.left = oBox.offsetLeft + 10 + 'px'; }, 1000 / 16 ); }
当我们点击按钮时候,div就会不停的向左运动,怎么让他停下来呢?停下来,肯定是需要条件的,比如,我们让他跑到500px的时候停下来
var timer = null; oBtn.onclick = function () { timer = setInterval( function(){ if ( oBox.offsetLeft == 500 ) { clearInterval( timer ); }else { oBox.style.left = oBox.offsetLeft + 10 + 'px'; } }, 1000 / 16 ); }
这样,我们就可以让div停在500px的位置,这里如果我们把步长10 改成 7或者8,你会发现停不下来了,为什么呢?因为会跳过500px这个判断条件
0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. 从497变成504跳过了500px,所以div停不下来,那怎么办呢?修改下判断条件就可以了.
oBtn.onclick = function () { timer = setInterval( function(){ if ( oBox.offsetLeft >= 500 ) { oBox.style.left = 500 + 'px'; clearInterval( timer ); }else { oBox.style.left = oBox.offsetLeft + 7 + 'px'; } }, 1000 / 16 ); }
把条件变成>=500 清除定时器, 同时还要加上这句代码oBox.style.left = 500 + 'px',让他强制被停在500px, 否则div就不会停在500px, 而是504px了,还有一个问题,如果在div运动的过程中,你不停的点击按钮,会发现, div开始加速运动了,而不是每次加10px了,这又是为什么呢?这是因为,每次点击一下按钮,就开了一个定时器,每次点击一个按钮就开了一个定时器,这样就会有多个定时器叠加,那么速度也会产生叠加,所以div开始加速了,那么我们要让他保持10px的速度,意思就是不要让定时器叠加,更通俗点说就是确保一个定时器在开着。应该怎么做呢?
oBtn.onclick = function () { clearInterval( timer ); timer = setInterval( function(){ if ( oBox.offsetLeft >= 500 ) { oBox.style.left = 500 + 'px'; clearInterval( timer ); }else { oBox.style.left = oBox.offsetLeft + 7 + 'px'; } }, 1000 / 16 ); }
只需要在每次点击按钮的时候,清除之前的定时器就可以了,这样就能确保始终一个定时器开着,至此,一个最基本的匀速运动结构就完成了,那么我们可以把他封装成函数
function animate(obj, target, speed) { clearInterval(timer); timer = setInterval(function () { if (obj.offsetLeft == target) { clearInterval(timer); } else { obj.style.left = obj.offsetLeft + speed + 'px'; } }, 30); }
有了这个函数之后,我们来小小的应用一下。
http://www.jiathis.com/getcode
打开这个网站,你注意看他右边有个侧栏式效果(分享到),这种特效在网站上很普遍
侧边栏 - by ghostwu 分享到
再来一个淡入淡出的效果:
当鼠标移上去之后,透明度变成1
淡入淡出 - by ghostwu
以上是“web开发中基于匀速运动的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
当前文章:web开发中基于匀速运动的示例分析
标题路径:http://pwwzsj.com/article/pdegso.html