频道导航

基于匀速运动的实例讲解(侧边栏,淡入淡出)

2019-01-07 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了基于匀速运动的实例讲解(侧边栏,淡入淡出)，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

javascript中，如何让一个元素(比如div)运动起来呢？

设置基本的样式，一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 );

div { width: 100px; height: 100px; background: red; position: absolute; left: 0px; }

基本的结构:

Box">

当我们点击，这个按钮的时候，要让div运动起来，其实就是让div的left值持续变化，那么div就会产生运动效果，我们先让left改变，再让他持续改变

Box = document.querySelector( '#Box' ); oBtn.onclick = function(){ oBox.style.left = oBox.offsetLeft + 10 + 'px'; } }

那么每当我点击按钮的时候，div的left值就会在原来的基础上加上10px。这里也可以用获取非行间样式的方法获取left的值再加上10px，也可以达到效果

Box = document.querySelector('#Box'); oBtn.onclick = function () { oBox.style.left = parseInt( css( oBox,'left' ) ) + 10 + 'px'; } }

offsetLeft与获取非行间样式left的值有什么区别呢？

offsetLeft没有px单位，而left是有px单位的

Box,'left' ) ); //0px alert( oBox.offsetLeft ); //0 }

现在div是点击一下动一下，我们让他持续动起来，怎么做？加上定时器

Box.style.left = oBox.offsetLeft + 10 + 'px'; },1000 / 16 ); }

当我们点击按钮时候，div就会不停的向左运动，怎么让他停下来呢？停下来，肯定是需要条件的，比如，我们让他跑到500px的时候停下来

Box.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停不下来，那怎么办呢？修改下判断条件就可以了.

= 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的速度，意思就是不要让定时器叠加，更通俗点说就是确保一个定时器在开着。应该怎么做呢？

= 500 ) { oBox.style.left = 500 + 'px'; clearInterval( timer ); }else { oBox.style.left = oBox.offsetLeft + 7 + 'px'; } },1000 / 16 ); }

只需要在每次点击按钮的时候，清除之前的定时器就可以了，这样就能确保始终一个定时器开着，至此，一个最基本的匀速运动结构就完成了，那么我们可以把他封装成函数

有了这个函数之后，我们来小小的应用一下。

http://www.jiathis.com/getcode

效果（分享到），这种特效在网站上很普遍