用原生JS写移动动画案例及实际应用

js很强大相信很多人都知道，那么它有哪些强大之处呢？有兴趣的人可以去查查，这里就不赘述了，因为不在本片文章讨论的范围。

我们要讲的是怎么用原生JS写移动动画？我们先举一个最简单的动画例子，很多网站的左边或右边会有个分享的框，鼠标放上去就还移出一个列表，里面是要分享的地址。鼠标移开，就会移进去。

要实现这个效果要怎么做呢？

可以想一想，鼠标经过和鼠标离开很好理解用onmousemove事件和onmouseout事件就能完成。

那移动动画呢？我们可以一步一步思考，

首先，一开始是这样的

完成移动完成后是这样的（只是案例里面的内容可以自己随便写）

那么怎么样做到一开始的样子呢？我们先用绝对定位，然后对left值写负数。这样就完成了初始。

position: absolute;
            left: -200px;
            top: 0px;

然后怎么让他移动呢？在Flash中的动画是由帧组成的，每帧移动一点就组成一幅完整连续的动画。

同理，我们知道在JS中有 setInterval 它是每隔多少秒执行一次函数。setInterval （a,2000）;每个2秒执行一次a函数。

然后我们每隔40毫秒向右移动10像素。这样看起来就是连续不断的移动了。

 window.onload=function(){
            var left_yd =document.getElementById("left_yidong");
            left_yd.onmousemove=function(){     //鼠标经过事件
                donghua(0,10,40); //（lefts为多少像素时停止,40为每40毫秒执行一次，10为每次移动10像素，控制速度）注意此处lefts的值为0
            }
            left_yd.onmouseout=function(){  //鼠标离开事件
                donghua(-200,-10,40);//注意此处lefts的值为left_yidong盒子的left的值。此处为-200px
            }
        };
        //以下函数请勿随意改动，以免出现错误。
        var times=null;
        function donghua(lefts,speen,time){    //（lefts为多少像素时停止，每隔time毫秒执行一次用了控制速度）
            clearInterval(times);//停止times
            var left_yd =document.getElementById("left_yidong");
            times=setInterval(function(){

                if(left_yd.offsetLeft==lefts)
                {
                    clearInterval(times);
                }else {
                    left_yd.style.left=left_yd.offsetLeft+speen+'px';
                }
            },time);
        }

这样的话动画就完成了，注意id名称改为自己的。

但是这样的动画是匀速的，我个人不是很喜欢，我想做一个运动速度越来越慢的动画怎么做？

很简单嘛，就是每次移动的像素的值减小就是上面代码的speen的值

 1 window.onload=function(){
 2             var left_yd =document.getElementById("left_yidong");
 3             left_yd.onmousemove=function(){     //鼠标经过事件
 4                 donghua(0,40); //（lefts为多少像素时停止,40为每40毫秒执行一次，控制速度）注意此处lefts的值为0
 5             }
 6             left_yd.onmouseout=function(){  //鼠标离开事件
 7                 donghua(-200,40);//注意此处lefts的值为left_yidong盒子的left的值。此处为-200px
 8             }
 9         };
10         //以下函数请勿随意改动，以免出现错误。
11         var times=null;
12         function donghua(lefts,time){    //（lefts为多少像素时停止，每隔time毫秒执行一次用了控制速度）
13             clearInterval(times);
14             var left_yd =document.getElementById("left_yidong");
15             times=setInterval(function(){
16                 var speen=(lefts-left_yd.offsetLeft)/20; //目标值减去当前值再除20，控制速度先快后慢
17                 speen=speen>0?Math.ceil(speen):Math.floor(speen);//speen的判断并向上或向下取整
18                 if(left_yd.offsetLeft==lefts)
19                 {
20                     clearInterval(times);
21                 }else {
22                     left_yd.style.left=left_yd.offsetLeft+speen+'px';
23                 }
24             },time);
25         }

新加入第16,17行代码就完成了，第16行是用来改变speen的值的，而第17行是用来取整的不然会出现小数，从而出现位置不正确的错误。

以一下是全部代码：（样式不好看，别介意）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #left_yidong{
 8             width: 200px;
 9             height: 500px;
10             background-color:#a6e1ec;
11             border-radius: 5px;
12             position: absolute;
13             left: -200px;
14             top: 0px;
15         }
16         #left_function{
17             width: 30px;
18             height: 50px;
19             background-color: #46b8da;
20             border-radius: 2px;
21             text-align: center;
22             line-height: 25px;
23             position: absolute;
24             left: 200px;
25             top: 200px;
26         }
27     </style>
28     <script>
29         window.onload=function(){
30             var left_yd =document.getElementById("left_yidong");
31             left_yd.onmousemove=function(){     //鼠标经过事件
32                 donghua(0,40); //（lefts为多少像素时停止,40为每40毫秒执行一次，控制速度）注意此处lefts的值为0
33             }
34             left_yd.onmouseout=function(){  //鼠标离开事件
35                 donghua(-200,40);//注意此处lefts的值为left_yidong盒子的left的值。此处为-200px
36             }
37         };
38         //以下函数请勿随意改动，以免出现错误。
39         var times=null;
40         function donghua(lefts,time){    //（lefts为多少像素时停止，每隔time毫秒执行一次用了控制速度）
41             clearInterval(times);
42             var left_yd =document.getElementById("left_yidong");
43             times=setInterval(function(){
44                 var speen=(lefts-left_yd.offsetLeft)/20;//目标值减去当前值再除20，控制速度先快后慢
45                 speen=speen>0?Math.ceil(speen):Math.floor(speen);//speen的判断并向上或向下取整
46                 if(left_yd.offsetLeft==lefts)
47                 {
48                     clearInterval(times);
49                 }else {
50                     left_yd.style.left=left_yd.offsetLeft+speen+'px';
51                 }
52             },time);
53         }
54     </script>
55 </head>
56 <body>
57 <div id="left_yidong">
58     <p>在这里插入你想要的内容</p>
59     <p>在这里插入你想要的内容</p>
60     <p>在这里插入你想要的内容</p>
61     <p>在这里插入你想要的内容</p>
62     <p>在这里插入你想要的内容</p>
63     <div id="left_function">分享</div>
64 </div>
65 </body>
66 </html>

实际应用：

下面我们将上面的技术运用到实际案例中：

一开始登录框在整个页面最上面，打开界面后登录框慢慢向下移除。就是把上面的从左到右改成从上到下。

 1 window.onload=function(){
 2         var onld =document.getElementById("onld");
 3         lod(70);
 4         var times=null;
 5         function lod(top){
 6             clearInterval(times);
 7             var onld =document.getElementById("onld");
 8             times=setInterval(function(){
 9                 var speen=(top-onld.offsetTop)/20;
10                 speen=speen>0?Math.ceil(speen):Math.floor(speen);
11                 if(onld.offsetTop==top)
12                 {
13                     clearInterval(times);
14                 }else {
15                     onld.style.top=onld.offsetTop+speen+'px';
16                 }
17             },50)
18         }
19     }
20 }

在实际应用中我为了方便就直接把时间写死在函数中了，因为在我这个项目中这个函数就只用到一次，不存在代码复用的问题，为了减少代码就直接写死在函数中了。

这个实际应用和上面的案例做的最重要的改动是将offsetLeft改成offsetTop。至于offsetLeft与offsetTop是什么意思看下面这张图就知道了。（此图来自百度知道）[图片不能看的问题已修改]

如果有什么疑问或者建议或者漏洞及错误欢迎指正，与我联系。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　——冷小包著

———————————————————————————————————————————————————————————————————————————————

转载请注明出处及作者。谢谢合作

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　——冷小包著

posted @ 2016-05-04 00:11 冷君阅读(5235) 评论(2) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

冷小包

用原生JS写移动动画案例及实际应用

公告