Javascript 运动基础 01

JS运动基础

运动基础

让Div运动起来

速度——物体运动的快慢

运动中的Bug

不会停止

速度取某些值会无法停止

到达位置后再点击还会运动

重复点击速度加快

匀速运动

速度不变

 1 <style>
 2 #div1 {200px; height:200px; background:red; position:absolute; top:50px; left:0px;}
 3 </style>
 4 <script>
 5 var timer=null;
 6 
 7 function startMove()
 8 {
 9     var oDiv=document.getElementById('div1');
10     
11     timer=setInterval(function (){
12         var speed=10;
13         
14         if(oDiv.offsetLeft>=300)
15         {
16             clearInterval(timer);
17         }
18         else
19         {
20             oDiv.style.left=oDiv.offsetLeft+speed+'px';
21         }
22     }, 30);
23 }
24 </script>
25 </head>
26 
27 <body>
28 <input id="btn1" type="button" value="开始运动" onclick="startMove()" />
29 <div id="div1">
30 </div>
31 </body>

View Code

/**/ div 的 css 样式一点要绝对定位 position:absolute; top:50px; left:0px;

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

缓冲运动

逐渐变慢，最后停止

距离越远速度越大

速度由距离决定

速度=(目标值-当前值)/缩放系数

例子：缓冲菜单

Bug：速度取整

跟随页面滚动的缓冲侧边栏

潜在问题：目标值不是整数时

 1 <style>
 2   #div1{ 100px;height:100px; position: absolute; top:50px; left:0px; background:#CCC;}
 3   #div2 {1px; height:300px; position:absolute; left:300px; top:0; background:black;}
 4 
 5 </style>
 6 
 7 <script>
 8 
 9 //window.onload= 
10 function startMove()
11 {
12     var oDiv=document.getElementById('div1');
13     setInterval(function (){
14         var speed=(300-oDiv.offsetLeft)/10;  
15         //由于这里的除法会得到小数
16         //所以使用了取整方法，向上取整 即 0.01~0.9999=1 
17         speed=Math.ceil(speed);//向下取整 即用 floor  0.001~0.999=0
18         oDiv.style.left=oDiv.offsetLeft+speed+'px';
19         document.title=oDiv.offsetLeft+','+speed;
20         },30)
21 }
22 </script>
23 </head>
24 
25 <body>
26 <input type="button" value="开始运动" onclick="startMove()" />
27 <div id="div1"></div>
28 <div id="div2"></div>
29 
30 </body>

使用了取整方法解决运动中的bug

使用前：使用后　　：

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

运动框架及应用

运动框架

在开始运动时，关闭已有定时器

把运动和停止隔开(if/else)

运动框架实例

例子1：“分享到”侧边栏

通过目标点，计算速度值

例子2：淡入淡出的图片

用变量存储透明度

  1 <style>
  2     #div1{ 120px; height:200px; background:#CCC; position:absolute; left:-120px;}
  3      #div1 span { 20px; height:70px; background:#FFF; border:1px #CCC solid; position:absolute; line-height:20px; top:70px; right:-20px;}
  4 
  5 
  6 </style>
  7 
  8 <script>
  9 
 10  window.onload=function (){
 11       var oDiv=document.getElementById('div1');
 12  oDiv.onmouseover=function ()
 13  {
 14     // startMove();
 15     //Move(0,10);
 16     Move2(0);
 17      }
 18      oDiv.onmouseout=function ()
 19      {
 20         //Move(-120,-10);
 21         // returnMove();
 22         Move2(-120);
 23          }
 24  }
 25  var timer=null // 用于记录计时器
 26   function startMove()
 27   {
 28        var oDiv=document.getElementById('div1');
 29        clearInterval(timer);
 30        timer=setInterval(function ()
 31        {
 32           if(oDiv.offsetLeft==0)
 33           {
 34               clearInterval(timer);
 35               } 
 36               else{ 
 37                   oDiv.style.left=oDiv.offsetLeft+10+'px';
 38               }
 39            }
 40        ,30)
 41       }
 42 function returnMove()
 43 {
 44     var oDiv=document.getElementById('div1');
 45     clearInterval(timer);
 46     timer=setInterval(function ()
 47     {
 48         if(oDiv.offsetLeft==-120)//这里特别要注意 不能使用 oDiv.style,.left==-120
 49         {
 50             clearInterval(timer);
 51         }
 52         else
 53         {
 54             oDiv.style.left=oDiv.offsetLeft-10+'px';
 55         }
 56     }
 57     ,30)
 58     
 59     }      
 60 // 优化后的函数
 61 function Move(offset,speed)
 62 {
 63     //var offset=0;
 64     //var speed=0;
 65     var oDiv=document.getElementById('div1');
 66     clearInterval(timer);
 67     timer=setInterval(function ()
 68     {
 69         if(oDiv.offsetLeft==offset)//这里特别要注意 不能使用 oDiv.style,.left==-120
 70         {
 71             clearInterval(timer);
 72         }
 73         else
 74         {
 75             oDiv.style.left=oDiv.offsetLeft+speed+'px';
 76         }
 77     }
 78     ,30)
 79     
 80     }
 81 //再次优化
 82 function Move2(offset)
 83 {
 84     //var offset=0;
 85     //var speed=0;
 86     var oDiv=document.getElementById('div1');
 87     clearInterval(timer);
 88     
 89     timer=setInterval(function ()
 90     {
 91         var speed=0;
 92         if(oDiv.offsetLeft>offset){ speed=-10; }else{ speed=10;}
 93         if(oDiv.offsetLeft==offset)//这里特别要注意 不能使用 oDiv.style,.left==-120
 94         {
 95             clearInterval(timer);
 96         }
 97         else
 98         {
 99             oDiv.style.left=oDiv.offsetLeft+speed+'px';
100         }
101     }
102     ,30)
103     
104     }
105 </script>
106 
107 
108 </head>
109 
110 <body>
111 <div id="div1">
112     <span>分享到</span>
113 </div>
114 </body>

分享到

 1 <style>
 2 #div1 {200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}<!-- 设置背景颜色的透明度 为了兼容主流浏览器 使用了两种设置法 -->
 3 </style>
 4 
 5 <script>
 6  
 7  window.onload=function ()
 8  {
 9           var oDiv=document.getElementById('div1');
10          oDiv.onmouseover=function ()
11          {
12              startJoin(100);
13              };
14          oDiv.onmouseout=function ()
15          {
16              startJoin(30);
17              };
18  }
19  
20  
21  var alpha=30;
22  var timer=null;
23  function startJoin(iTarget)
24  {
25     var oDiv=document.getElementById('div1');
26     clearInterval(timer);
27     timer=setInterval(function (){
28         var speed=0;
29         if(alpha<iTarget)
30         {
31             speed=10;
32         }
33         else
34         {
35             speed= -10;
36         }
37         
38         if(alpha==iTarget)
39         {
40             clearInterval(timer);
41         }
42         else
43         {
44             alpha+=speed;
45             
46             oDiv.style.filter='alpha(opacity:'+alpha+')'    // 'alpha(opacity:' +alpha+ ')'      为了兼容，还有需加入下面的代码
47             oDiv.style.opacity=alpha/100 ; // alpha 后面是小数值,故除以100
48         }
49         },30)
50      
51      }
52 
53 </script>
54 
55 </head>
56 
57 <body>
58 <div id="div1"></div>
59 </body>

淡入淡出

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

匀速运动的停止条件

运动终止条件

匀速运动：距离足够近

缓冲运动：两点重合

 1 <style>
 2 #div1 {100px; height:150px; background:#999; position:absolute; right:0; bottom:0;}
 3 </style>
 4 
 5 <script>
 6 window.onscroll=function ()
 7 {
 8     var oDiv=document.getElementById('div1');
 9     var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//
10     
11     //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
12     
13     startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
14 
15     
16     //第一个应该是可视窗口的高度，减去div的高度那应该就等于div顶部与可视窗口顶部的距离吧
17     /*document.documentElement.scrollTop指的是滚动条的垂直坐标
18      document.documentElement.clientHeight指的是浏览器可见区域高度
19      document.documentElement.clientHeight-oDiv是悬浮框的初始垂直坐标（相对于body的top值）（这个值是固定不变的）
20      但是当你拉动滚动条的时候，悬浮框的垂直坐标（target）必须要在初始坐标的基础上增减相应的值才能获得视觉上随滚动条滚动
21      的效果，而这个增减的值就是滚动条拉动的距离，即你这个scrollTop
22     */
23     
24 }
25 
26     var timer=null;
27 
28 function startMove(iTarget)
29 {
30     var oDiv=document.getElementById('div1');
31     
32     clearInterval(timer);
33     timer=setInterval(function (){
34         var speed=(iTarget-oDiv.offsetTop)/2;
35         speed=speed>0?Math.ceil(speed):Math.floor(speed);
36         
37         if(oDiv.offsetTop==iTarget)
38         {
39             clearInterval(timer);
40         }
41         else
42         {
43             oDiv.style.top=oDiv.offsetTop+speed+'px';
44         }
45     }, 30);
46 }
47 
48 </script>
49 
50 </head>
51 
52 
53 <body style="height:2000px;">
54 <div id="div1"></div>
55 
56 </body>

右侧悬浮框

对联悬浮框：

1 startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2)+scrollTop);

只需要改动这行代码即可