javaScript运动

1、定时器

　　window对象有一个方法叫做window.setInterval（函数，间隔时间）; 能够使每个间隔时间，调用一次函数，我们习惯叫做定时器，按理说应该叫做“间隔器” 其中window可以省略，间隔时间是以毫秒为单位，1000毫秒就是1秒

2、简单的运动模型

视觉暂留：把连续相关的画面，连续播放，就是运动了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
             100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>

    <input type="button" value='start'>
    <input type="button" value='stop'>
    <div class="box"></div>

    <script>

        // 信号量
        var left = 100;

        // 获取div和按钮
        var box = document.getElementsByTagName('div')[0];
        var start = document.getElementsByTagName('input')[0];
        var stop = document.getElementsByTagName('input')[1];

        // 声明定时器
        var timer;

        // 监听事件
        start.onclick = function(){
            // 设表先关
            clearInterval(timer);

            // 定时器 一秒钟移动10px
            timer = setInterval(function(){
                left += 13;

                if(left > 600){
                    // 拉终停表
                    left = 600;
                    clearInterval(timer);
                }
                // console.log(left);

                box.style.left = left + 'px';
            }, 50);
            
        }
        stop.onclick = function(){
            // 清除定时器
            clearInterval(timer);
        }

    </script>

</body>
</html>

View Code

3、无缝连续滚动

eg：实现下图连续滚动的效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 
 7     <style>
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12 
13         .box{
14              800px;
15             height: 130px;
16             border: 10px solid gray;
17             margin: 100px auto;
18             position: relative;
19             overflow: hidden;
20         }
21 
22         .m_unit{
23             list-style: none;
24             /*这个宽度很重要*/
25              8000px;
26             overflow: hidden;
27             position: absolute;
28             top: 0;
29             left: 0;
30         }
31 
32         .m_unit li{
33             float: left;
34             margin-right: 10px;
35         }
36     </style>
37 </head>
38 <body>
39     
40     <div class="box">
41         <ul class="m_unit">
42             <li><a href="#"><img src="images/shuzi/0.png" alt=""></a></li>
43             <li><a href="#"><img src="images/shuzi/1.png" alt=""></a></li>
44             <li><a href="#"><img src="images/shuzi/2.png" alt=""></a></li>
45             <li><a href="#"><img src="images/shuzi/3.png" alt=""></a></li>
46             <li><a href="#"><img src="images/shuzi/4.png" alt=""></a></li>
47             <li><a href="#"><img src="images/shuzi/5.png" alt=""></a></li>
48         </ul>
49     </div>
50 
51     <script>
52 
53         // 获取元素
54         var box = document.getElementsByTagName('div')[0];
55         var m_unit = document.getElementsByTagName('ul')[0];
56 
57         // 复制一份li
58         m_unit.innerHTML += m_unit.innerHTML;
59 
60         // 信号量
61         var left = 0;
62 
63         // 默认滚动
64         move();
65 
66         // 鼠标进入 清除定时器
67         box.onmouseover = function(){
68             clearInterval(timer);
69         }
70 
71         // 鼠标离开 添加定时器
72         box.onmouseout = function(){
73             move();
74         }
75 
76         function move(){
77             timer = setInterval(function(){
78                 left -= 10;  //向左移动的步长为10
79                 if(left <= -1260){ //1260=6个margin值+6个图片的宽
80                     left = 0;
81                 }
82                 m_unit.style.left = left + 'px';
83             }, 50); //间隔时间是50毫秒
84         }
85 
86     </script>
87 
88 </body>
89 </html>

View Code