运动---第七课时
弹性运动----弹性运动不同于匀速运动，元素运动的速度先快后慢，后者是先慢后快，而且在运动的过程中有一个权重（类似于重力加速度），看上去就像真实的自由落体运动一样。下面看一下加速运动和减速运动：加速运动顾名思义就是速度不断增加，具体到这里就是iSpeed++，每一次都加1，实现累加。累减的过程刚好相反，假设变量iSpeed的初始值为20，然后速度递减iSpeed--,也就是累减。加速运动和减速运动的结合体就构成了弹性运动。
加速运动：
1 <script> 2 var iSpeed=0; 4 function startMove() 5 { 6 var oDiv=document.getElementById('div1'); 8 setInterval(function (){ 9 iSpeed++； 11 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 12 }, 30); 13 } 14 </script>
减速运动：当元素的速度减到为0时，速度继续减小，然后变为负值，会往反方向运动。这个还蛮有意思的。
1 <script> 2 var iSpeed=20; 3 function startMove() 4 { 5 var oDiv=document.getElementById('div1'); 7 setInterval(function (){ 8 iSpeed--; 9 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 10 }, 30); 11 } 12 </script>
简单的弹性运动：当点击按钮的时候，元素左右摆动，但是因为没有加权，所以运动起来弹性似乎没有。速度iSpeed++的写法有很多种，iSpeed++其实就是iSpeed=ispeed+1;为了改进速度的加权，所以把iSpeed++改为iSpeed+=(300-oDiv.offsetLeft)/50;让速度有一个变化的趋势
1 <style> 2 #div1{width:100px;height:100px;background:#000;} 3 </style> 4 <script> 5 var iSpeed=0; 6 7 function startMove() 8 { 9 var oDiv=document.getElementById('div1');//不知道为神马出不来效果，把点击事件给按钮也没有反应 10 var oBtn=document.getElementById('btn1'); 11 12 oBtn.onclick=setInterval(function (){ 13 if(oDiv.offsetLeft<300) 14 { 15 iSpeed++;//就是累加1 16 //iSpeed+=(300-oDiv.offsetLeft)/50; 17 } 18 else 19 { 20 iSpeed--;//就是累减1 21 //iSpeed-=(oDiv.offsetLeft-300)/50; 22 } 23 //iSpeed+=(300-oDiv.offsetLeft)/50;其实也就是这一句话，加速和减速化简后式子相等 24 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 25 }, 30); 26 } 27 </script> 28 </head> 29 30 <body> 31 <input type="button" value="开始运动" id="btn1"/> 32 <div id="div1"></div> 33 <div style="position:absolute;left:300px;top:0;background:#333;width:1px;height:500px;"> </div> 34 </body>
弹性+摩擦：弹性就是改变元素的Left值，摩擦就是让元素的速度越来越慢，直到停止。当iSpeed累乘以一个小于1的数的时候，速度就开始越来越慢了，知道元素停止运动。把累乘和累加结合起来就实现了元素的弹性运动，并且在需要的时候停止运动。
1 <script> 2 var iSpeed=0; 3 function startMove() 4 { 5 var oDiv=document.getElementById('div1'); 6 setInterval(function (){ 7 iSpeed+=(300-oDiv.offsetLeft)/5; 8 iSpeed*=0.7; 9 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 10 }, 30); 11 } 12 </script>
滑动的菜单----在结构上多设置了一个li，用来隐藏和显示红色背景，这个li只起到这么一个作用。把它定位到其他li的下面，形成下划线的效果。oBg是li的最后一个，所以获取他就要在长度上减1；同时在做循环的时候，最后一个li不需要添加事件，所以同样是length-1;startMove函数改变oBg的offsetLeft来实现下划线的不同位置。为了避免样式不支持小数点，所以把left值赋值给一个变量，因为变量可以接受小数点，所以就可以避免小数点带来的问题。清楚定时器的条件要满足两个：一是速度在-1到1之间的时候，距离在-1到1的时候。因为倒数第二个li会存在一个像素的误差，所以强制性的设置它的left为目标值，即obj.style.left=iTarget+'px'。这个例子有点伤脑筋，慢慢斟酌:)
1 <style> 2 * { padding: 0; margin: 0; } 3 li { list-style: none; } 4 5 ul { width: 400px; height: 30px; position: relative; margin: 100px auto 0; } 6 li { float: left; width: 98px; height: 28px; line-height: 28px; border: 1px solid #ccc; text-align: center; z-index: 2; position: relative; cursor: pointer; } 7 .bg { width: 100px; height: 5px; overflow: hidden; background: red; border: none; position: absolute; top: 24px; left: 0; z-index: 1; } 8 </style> 9 <script type="text/javascript"> 10 window.onload=function () 11 { 12 var oUl=document.getElementById('ul1'); 13 var aLi=oUl.getElementsByTagName('li'); 14 var oBg=aLi[aLi.length-1]; 15 var i=0; 16 17 for(i=0;i<aLi.length-1;i++) 18 { 19 aLi[i].onmouseover=function () 20 { 21 startMove(oBg, this.offsetLeft); 22 }; 23 } 24 }; 25 var iSpeed=0; 26 var left=0; 27 28 function startMove(obj, iTarget) 29 { 30 clearInterval(obj.timer); 31 obj.timer=setInterval(function (){ 32 iSpeed+=(iTarget-obj.offsetLeft)/5; 33 iSpeed*=0.7; 34 35 left+=iSpeed; 36 37 if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1) 38 { 39 clearInterval(obj.timer); 40 41 obj.style.left=iTarget+'px'; 42 43 //alert('关了'); 44 } 45 else 46 { 47 obj.style.left=left+'px'; 48 } 49 }, 30); 50 } 51 </script> 52 </head> 53 <body> 54 <ul id="ul1"> 55 <li>首页</li> 56 <li>关于我们</li> 57 <li>产品</li> 58 <li>联系方式</li> 59 <li class="bg"></li> 60 </ul> 61 </body>
效果图