运动---第八课时

运动的最后一课时笔记，感觉蛮难的，有一些东西没有理解，涉及的知识点非常多。

先来看一个小小的东西。关于弹性运动-----设置一个div，当鼠标移上去的时候div伸展开，当鼠标移出的时候div还原到原先的大小。可以复制代码自己运行一下。

iSpeed+=(iTarget-height)/5;
iSpeed*=0.7;

这两句用来设置div运动时的速度，首先加等于实现缓冲效果，其次在第一次的处理之后继续减小速度，乘以一个小于1的数。

if(Math.abs(iSpeed)<1&&Math.abs(iSpeed-height)<1)
{
clearInterval(obj.timer);
obj.style.height=iTarget+'px';
}
else{
height+=iSpeed;
obj.style.height=height+'px';
}

如果速度小于1，并且距离小于1，那么就清除定时器；同时硬性的设置div的高度为目标值；相反地，就运行定时器。

 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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7     #div1{width:100px;height:50px;background:#666;}
 8 </style>
 9 <script>
10     window.onload=function(){
11             var oDiv=document.getElementById('div1');
12             oDiv.onmouseover=function(){
13                     startMove(oDiv,100);
14                 };
15             oDiv.onmouseout=function(){
16                     startMove(oDiv,50);
17                 };
18         }
19 
20         var iSpeed=0;
21         var height=50;
22         
23     function startMove(obj,iTarget){
24         clearInterval(obj.timer);
25         obj.timer=setInterval(function(){
26             iSpeed+=(iTarget-height)/5;    
27             iSpeed*=0.7;
28             if(Math.abs(iSpeed)<1&&Math.abs(iSpeed-height)<1)
29             {
30                 clearInterval(obj.timer);
31                 obj.style.height=iTarget+'px';
32             }
33             else{
34                 height+=iSpeed;
35                 obj.style.height=height+'px';
36             }
37         },30);
38         
39     }
40 </script>
41 </head>
42 
43 <body>
44 <div id="div1"></div>
45 </body>
46 </html>
All Code

拖拽+重力+弹性

为了方便看，把代码直接展开。当鼠标按住div后，div跟着鼠标走，把div丢出去的时候会自己滚动直到停止。startMove函数注意的地方----因为div会跑出浏览器的当前视窗，所以要限制div的活动范围，给上下左右都设置规则，当要超出范围的时候，把速度iSpeed*=-1这样div会往相反的方向走；因为div每次移动的距离是不一样的，有时会产生滚动条，可以给body设置一个overflow，但是一个网站不可能只有一屏的高度，就算有，也很少，所以干脆硬性设置，把他的位置设置为最左边，最下面，这样就不会有滚动条。事件对象--前面的文章有写过，拖拽就是通过事件对象实现，获取鼠标的坐标，当鼠标松开的时候执行startMove函数，同时清除鼠标移动，鼠标按下事件。最后在执行了整个鼠标按下事件以后清除定时器，下次拖拽就不会受上次的影响。对于鼠标坐标获取个人有点模糊。明天开始学习面向对象，其实看过一遍了，面向对象的写法比运动还要难得多，需要时间多琢磨琢磨。暂时到这，明天考六级。。

  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:100px; background:red; position:absolute;}
  6 div {width:3px; height:3px; position:absolute; background:black;}
  7 </style>
  8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9 <title>无标题文档</title>
 10 <script>
 11 window.onload=function ()
 12 {
 13     var oDiv=document.getElementById('div1');
 14     
 15     var lastX=0;
 16     var lastY=0;
 17     
 18     oDiv.onmousedown=function (ev)
 19     {
 20         var oEvent=ev||event;
 21         
 22         var disX=oEvent.clientX-oDiv.offsetLeft;
 23         var disY=oEvent.clientY-oDiv.offsetTop;
 24         
 25         document.onmousemove=function (ev)
 26         {
 27             var oEvent=ev||event;
 28             
 29             var l=oEvent.clientX-disX;
 30             var t=oEvent.clientY-disY;
 31             
 32             oDiv.style.left=l+'px';
 33             oDiv.style.top=t+'px';
 34             
 35             iSpeedX=l-lastX;
 36             iSpeedY=t-lastY;
 37             
 38             lastX=l;
 39             lastY=t;
 40             
 41             document.title='x:'+iSpeedX+', y:'+iSpeedY;
 42         };
 43         
 44         document.onmouseup=function ()
 45         {
 46             document.onmousemove=null;
 47             document.onmouseup=null;
 48             
 49             startMove();
 50         };
 51         
 52         clearInterval(timer);
 53     };
 54 };
 55 
 56 var timer=null;
 57 
 58 var iSpeedX=0;
 59 var iSpeedY=0;
 60 
 61 function startMove()
 62 {
 63     clearInterval(timer);
 64     
 65     timer=setInterval(function (){
 66         var oDiv=document.getElementById('div1');
 67         
 68         iSpeedY+=3;
 69         
 70         var l=oDiv.offsetLeft+iSpeedX;
 71         var t=oDiv.offsetTop+iSpeedY;
 72         
 73         if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
 74         {
 75             iSpeedY*=-0.8;
 76             iSpeedX*=0.8;
 77             t=document.documentElement.clientHeight-oDiv.offsetHeight;
 78         }
 79         else if(t<=0)
 80         {
 81             iSpeedY*=-1;
 82             iSpeedX*=0.8;
 83             t=0;
 84         }
 85         
 86         if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
 87         {
 88             iSpeedX*=-0.8;
 89             l=document.documentElement.clientWidth-oDiv.offsetWidth;
 90         }
 91         else if(l<=0)
 92         {
 93             iSpeedX*=-0.8;
 94             l=0;
 95         }
 96         
 97         if(Math.abs(iSpeedX)<1)
 98         {
 99             iSpeedX=0;
100         }
101         
102         if(Math.abs(iSpeedY)<1)
103         {
104             iSpeedY=0;
105         }
106         
107         if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)
108         {
109             clearInterval(timer);
110             alert('停止');
111         }
112         else
113         {
114             oDiv.style.left=l+'px';
115             oDiv.style.top=t+'px';
116         }
117         
118         document.title=iSpeedX;
119     }, 30);
120 }
121 </script>
122 </head>
123 
124 <body>
125 <input type="button" value="开始运动" onclick="startMove()" />
126 <div id="div1">
127 </div>
128 </body>
129 </html>

 

posted @ 2013-06-14 22:52  Paxster  阅读(173)  评论(0)  编辑  收藏  举报