[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)

Posted 2020-10-10 ghostwu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)相关的知识，希望对你有一定的参考价值。

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

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

1 <style>
2        div {
3            width: 100px;
4            height: 100px;
5            background: red;
6            position: absolute;
7            left: 0px;
8        }
9 </style>

基本的结构:

1     <input type="button" value="动起来"/>
2     <div id="box"></div>

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

1     window.onload = function(){
2         var oBtn = document.querySelector( "input" ),
3             oBox = document.querySelector( \'#box\' );
4         oBtn.onclick = function(){
5             oBox.style.left = oBox.offsetLeft + 10 + \'px\';
6         }
7     }

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

 1 function css(obj, attr) {
 2     if (obj.currentStyle) {
 3         return obj.currentStyle[attr];
 4     } else {
 5         return getComputedStyle(obj, false)[attr];
 6     }
 7 }
 8 window.onload = function () {
 9     var oBtn = document.querySelector("input"),
10         oBox = document.querySelector(\'#box\');
11     oBtn.onclick = function () {
12         oBox.style.left = parseInt( css( oBox, \'left\' ) ) + 10 + \'px\';
13     }
14 }

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

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

1 oBtn.onclick = function () {
2         // alert( css( oBox, \'left\' ) ); //0px
3         alert( oBox.offsetLeft ); //0
4     }

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

1     oBtn.onclick = function () {
2         setInterval( function(){
3             oBox.style.left = oBox.offsetLeft + 10 + \'px\';
4         }, 1000 / 16 );
5     }

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

 1 var timer = null;
 2     oBtn.onclick = function () {
 3         timer = setInterval( function(){
 4             if ( oBox.offsetLeft == 500 ) {
 5                 clearInterval( timer );
 6             }else {
 7                 oBox.style.left = oBox.offsetLeft + 10 + \'px\';
 8             }
 9         }, 1000 / 16 );
10     }

这样，我们就可以让div停在500px的位置，这里如果我们把步长10 改成 7或者8，你会发现停不下来了，为什么呢？因为会跳过500px这个判断条件

0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. 从497变成504跳过了500px，所以div停不下来，那怎么办呢？修改下判断条件就可以了.

 1 oBtn.onclick = function () {
 2     timer = setInterval( function(){
 3         if ( oBox.offsetLeft >= 500 ) {
 4             oBox.style.left = 500 + \'px\';
 5             clearInterval( timer );
 6         }else {
 7             oBox.style.left = oBox.offsetLeft + 7 + \'px\';
 8         }
 9     }, 1000 / 16 );
10 }

把条件变成>=500 清除定时器，同时还要加上这句代码oBox.style.left = 500 + \'px\'，让他强制被停在500px, 否则div就不会停在500px, 而是504px了，还有一个问题，如果在div运动的过程中，你不停的点击按钮，会发现， div开始加速运动了，而不是每次加10px了，这又是为什么呢？这是因为，每次点击一下按钮，就开了一个定时器，每次点击一个按钮就开了一个定时器，这样就会有多个定时器叠加，那么速度也会产生叠加，所以div开始加速了，那么我们要让他保持10px的速度，意思就是不要让定时器叠加，更通俗点说就是确保一个定时器在开着。应该怎么做呢？

 1 oBtn.onclick = function () {
 2     clearInterval( timer );
 3     timer = setInterval( function(){
 4         if ( oBox.offsetLeft >= 500 ) {
 5             oBox.style.left = 500 + \'px\';
 6             clearInterval( timer );
 7         }else {
 8             oBox.style.left = oBox.offsetLeft + 7 + \'px\';
 9         }
10     }, 1000 / 16 );
11 }

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

 1         function animate(obj, target, speed) {
 2                 clearInterval(timer);
 3                 timer = setInterval(function () {
 4                     if (obj.offsetLeft == target) {
 5                         clearInterval(timer);
 6                     } else {
 7                         obj.style.left = obj.offsetLeft + speed + \'px\';
 8                     }
 9                 }, 30);
10             }

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

http://www.jiathis.com/getcode

打开这个网站，你注意看他右边有个侧栏式效果（分享到），这种特效在网站上很普遍

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>侧边栏 - by ghostwu</title>
 6     <style>
 7         #box {
 8             width: 150px;
 9             height: 300px;
10             background: red;
11             position: absolute;
12             left: -150px;
13             top: 50px;
14         }
15 
16         #box div {
17             width: 28px;
18             height: 100px;
19             position: absolute;
20             right: -28px;
21             top: 100px;
22             background: green;
23         }
24     </style>
25     <script>
26         window.onload = function () {
27             var timer = null;
28             var oBox = document.getElementById("box");
29             oBox.onmouseover = function () {
30                 animate(this, 0, 10);
31             }
32             oBox.onmouseout = function () {
33                 animate(this, -150, -10);
34             }
35             function animate(obj, target, speed) {
36                 clearInterval(timer);
37                 timer = setInterval(function () {
38                     if (obj.offsetLeft == target) {
39                         clearInterval(timer);
40                     } else {
41                         obj.style.left = obj.offsetLeft + speed + \'px\';
42                     }
43                 }, 30);
44             }
45         }
46     </script>
47 </head>
48 <body>
49 <div id="box">
50     <div>分享到</div>
51 </div>
52 </body>
53 </html>

再来一个淡入淡出的效果:

当鼠标移上去之后，透明度变成1

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>淡入淡出 - by ghostwu</title>
 6     <style>
 7         img {
 8             border: none;
 9             opacity: 0.3;
10             filter: alpha(opacity:30);
11         }
12     </style>
13     <script>
14         window.onload = function () {
15             var timer = null;
16             var oImg = document.getElementById("img");
17             oImg.onmouseover = function(){
18                 animate( this, 100, 10 );
19             }
20             oImg.onmouseout = function(){
21                 animate( this, 30, -10 );
22             }
23             //alpha=30 --> 100
24             function animate(obj, target, speed) {
25                 clearInterval(timer);
26                 var cur = 0;
27                 timer = setInterval(function () {
28                     cur = css( obj, \'opacity\') * 100;
29                     if( cur == target ){
30                        clearInterval( timer );
31                     }else {
32                         cur += speed;
33                         obj.style.opacity = cur / 100;
34                         obj.style.filter = "alpha(opacity:" + cur + ")";
35                     }
36                 }, 30);
37             }
38 
39             function css(obj, attr) {
40                 if (obj.currentStyle) {
41                     return obj.currentStyle[attr];
42                 } else {
43                     return getComputedStyle(obj, false)[attr];
44                 }
45             }
46         }
47     </script>
48 </head>
49 <body>
50 <img src="./img/h4.jpg" alt="" id="img"/>
51 </body>
52 </html>

以上是关于[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)的主要内容，如果未能解决你的问题，请参考以下文章

[js高手之路]面向对象版本匀速运动框架

[js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)

CSS动效实战（纯CSS与JS动效）03 精美手风琴侧边栏完整示例教程示例1

js运动02----"分享到"侧边栏