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>
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>