js运动基础

浏览数：33 / 时间：2015年06月09日

1. 什么是运动
2. 如何让DIV动起来，运动停止条件

 1 function startMove()
 2 {
 3     var oDiv=document.getElementById(‘div1‘);
 4     
 5     timer=setInterval(function (){
 6         var iSpeed=7;
 7         
 8         if(oDiv.offsetLeft>=300)
 9         {
10             //运动一旦达到我的要求，就应该让运动停止，取消定时器 clearInterval
11             clearInterval(timer);
12         }
13         oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;
14     }, 30);
15 }

View Code

3. 解决连续点击引发的重复运动问题

 1 var timer=null;//设置一个定时器，便于取消定时器
 2 
 3 function startMove()
 4 {
 5     var oDiv=document.getElementById(‘div1‘);
 6     
 7     timer=setInterval(function (){
 8         var iSpeed=10;
 9         
10         if(oDiv.offsetLeft>=300)    //是否到达终点
11         {    
12             //运动一旦达到我的要求，就应该让运动停止，取消定时器 clearInterval
13             clearInterval(timer);    //到达终点
14         }
15         else
16         {    //用else来解决连续重复点击速度加快的问题
17             oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;    //到达之前
18         }
19     }, 30);
20 }

4. 消除重复点击速度加快的问题

因为每次点击一次按钮就开一个定时器，导致定时器同时开了好多个，因此我们只需要保证永远只有一个定时器，在前面加一个clearInterval取消前面的定时器，保证整个过程中只开启一个定时器。

 1 var timer=null;
 2 
 3 function startMove()
 4 {
 5     var oDiv=document.getElementById(‘div1‘);
 6     //防止在点击多次之后同时开启多个定时器，在一开始就关掉原来所有的定时器，保证点击时只会开一个定时器。
 7     clearInterval(timer);
 8     timer=setInterval(function (){
 9         var iSpeed=5;
10         
11         if(oDiv.offsetLeft>=300)    //是否到达终点
12         {
13             clearInterval(timer);    //到达终点
14         }
15         else
16         {
17             oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;    //到达之前
18         }
19     }, 30);
20 }

5. 运动框架介绍

一套框架完成多件事

6. “分享到”侧边栏实例——便用运动框架

　　思考问题的实质，侧边缘广告的实质是鼠标的移入移出，我们在这里加上定时器，让他显示的比较好看

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 #div1 {width:100px; height:200px; background:#CCC; position:absolute; left:-100px;}
 6 #div1 span {width:20px; height:60px; line-height:20px; text-align:center; left:100px; top:70px; background:yellow; position:absolute;}
 7 
 8 </style>
 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 <title>无标题文档</title>
11 <script type="text/javascript">
12 window.onload=function ()
13 {
14     var oDiv=document.getElementById(‘div1‘);
15 
16     //给div加入一个鼠标移入的事件
17     oDiv.onmouseover=function ()
18     {
19         startMove();//函数调用
20     }
21     //给div加入一个鼠标移出的事件
22     oDiv.onmouseout=function ()
23     {
24         startMove2();//函数调用
25     }
26 }
27 var timer=null;
28 
29 function startMove()
30 {
31     var oDiv=document.getElementById(‘div1‘);
32     
33     clearInterval(timer);
34     timer=setInterval(function (){
35         var iSpeed=10;
36         
37         if(oDiv.offsetLeft==0)
38         {
39             clearInterval(timer);
40         }
41         else
42         {
43             oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;
44         }
45     }, 30);
46 }
47 
48 function startMove2()
49 {
50     var oDiv=document.getElementById(‘div1‘);
51     
52     clearInterval(timer);
53     timer=setInterval(function (){
54         var iSpeed=-10;
55         
56         if(oDiv.offsetLeft==-100)
57         {
58             clearInterval(timer);
59         }
60         else
61         {
62             oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;
63         }
64     }, 30);
65 }
66 </script>
67 </head>
68 
69 <body>
70 <div id="div1">
71     <span>分享到</span>
72 </div>
73 </body>
74 </html>

View Code

7. 简化函数参数的意义、方式

　　对于有相同的内容的代码，用函数包装起来

 1 window.onload=function ()
 2 {
 3     var oDiv=document.getElementById(‘div1‘);
 4     
 5     oDiv.onmouseover=function ()
 6     {
 7         startMove(10, 0);
 8     }
 9     
10     oDiv.onmouseout=function ()
11     {
12         startMove(-10, -100);
13     }
14 }
15 var timer=null;
16 
17 function startMove(iSpeed, iTarget)
18 {
19     var oDiv=document.getElementById(‘div1‘);
20     
21     clearInterval(timer);
22     timer=setInterval(function (){
23         
24         if(oDiv.offsetLeft==iTarget)
25         {
26             clearInterval(timer);
27         }
28         else
29         {
30             oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;
31         }
32     }, 30);
33 }

View Code

 1 window.onload=function ()
 2 {
 3     var oDiv=document.getElementById(‘div1‘);
 4     
 5     oDiv.onmouseover=function ()
 6     {
 7         startMove(0);
 8     }
 9     
10     oDiv.onmouseout=function ()
11     {
12         startMove(-100);
13     }
14 }
15 var timer=null;
16 
17 function startMove(iTarget)
18 {
19     var oDiv=document.getElementById(‘div1‘);
20     
21     clearInterval(timer);
22     timer=setInterval(function (){
23         var iSpeed=0;
24         
25         if(oDiv.offsetLeft<iTarget)
26         {
27             iSpeed=10;
28         }
29         else
30         {
31             iSpeed=-10;
32         }
33         
34         if(oDiv.offsetLeft==iTarget)
35         {
36             clearInterval(timer);
37         }
38         else
39         {
40             oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;
41         }
42     }, 30);
43 }

View Code

8. 淡入淡出的图片实例（上）

 1 window.onload=function ()
 2 {
 3     var oImg=document.getElementById(‘img1‘);
 4     
 5     oImg.onmouseover=function ()
 6     {
 7         startMove(100);
 8     }
 9     
10     oImg.onmouseout=function ()
11     {
12         startMove(30);
13     }
14 }
15 var timer=null;
16 
17 var alpha=30;
18 
19 function startMove(iTarget)
20 {
21     var oImg=document.getElementById(‘img1‘);
22     
23     clearInterval(timer);
24     timer=setInterval(function (){
25         var iSpeed=0;
26         
27         if(alpha<iTarget)
28         {
29             iSpeed=5;
30         }
31         else
32         {
33             iSpeed=-5;
34         }
35         
36         if(alpha==iTarget)
37         {
38             clearInterval(timer);
39         }
40         else
41         {
42             alpha+=iSpeed;
43             
44             oImg.style.filter=‘alpha(opacity:‘+alpha+‘)‘;
45             oImg.style.opacity=alpha/100;
46             
47             document.title=alpha;
48         }
49     }, 30);
50 }