运动---第八课时

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

先来看一个小小的东西。关于弹性运动-----设置一个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>

 

你可能感兴趣的:(运动)