运动---第七课时

弹性运动----弹性运动不同于匀速运动，元素运动的速度先快后慢，后者是先慢后快，而且在运动的过程中有一个权重（类似于重力加速度），看上去就像真实的自由落体运动一样。下面看一下加速运动和减速运动：加速运动顾名思义就是速度不断增加，具体到这里就是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>

效果图


__EOF__

本文作者：Paxster
本文链接：https://www.cnblogs.com/paxster/archive/2013/06/12/3133333.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   Paxster  阅读(1063)  评论(1)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
SQL AI 助手