弹性运动

1. 弹性运动公式

 1     window.onload = function() {
 2         var oDiv = document.getElementById("div1");
 3         var iSpeed = 0;
 4 
 5         setInterval(function() {
 6             //弹性运动
 7             iSpeed += (300 - oDiv.offsetLeft) / 5;
 8 
 9             //摩擦力
10             iSpeed *= 0.7;
11 
12             oDiv.style.left = oDiv.offsetLeft + iSpeed + "px";
13         }, 30);
14     };

2. 应用 - 弹性导航

 1     window.onload = function() {
 2         var oUl = document.getElementById("ul1");
 3         var aLi = document.getElementsByTagName("li");
 4         var oBg = aLi[aLi.length - 1];
 5 
 6         for (var i = 0; i < aLi.length - 1; i++) {
 7             aLi[i].onmouseover = function() {
 8                 startMove(oBg, this.offsetLeft);
 9             };
10         }
11     };
12 
13     var iSpeed = 0;
14     var left = 0;
15 
16     function startMove(obj, iTarget) {
17         clearInterval(obj.timer);
18         obj.timer = setInterval(function() {
19             iSpeed += (iTarget - obj.offsetLeft) / 5;
20             iSpeed *= 0.7;
21             
22             //处理小数误差的问题
23             if (Math.abs(iSpeed) < 1 && Math.abs(iTarget - left) < 1) {
24                 clearInterval(obj.timer);
25                 obj.style.left = iTarget + "px";
26             } else {
27                 left+=iSpeed;
28                 obj.style.left = left + "px";
29             }
30         }, 30);
31     }

3. 应用 - 弹性菜单，注意运动越界

 1     window.onload = function() {
 2         var oDiv = document.getElementById("div1");
 3         oDiv.onmouseover = function() {
 4             startMove(this, 300);
 5         };
 6 
 7         oDiv.onmouseout = function() {
 8             startMove(this, 50);
 9         };
10     };
11 
12     var iSpeed = 0;
13     var height = 0;
14 
15     function startMove(obj, iTarget) {
16         clearInterval(obj.timer);
17         obj.timer = setInterval(function() {
18             iSpeed += (iTarget - obj.offsetHeight) / 5;
19             iSpeed *= 0.7;
20 
21             if (Math.abs(iSpeed) < 1 && Math.abs(iTarget - height) < 1) {
22                 clearInterval(obj.timer);
23                 obj.style.height = iTarget + "px";
24             } else {
25                 height += iSpeed;
26 
27                 //防止运动过界，height 没有负数
28                 height = height < 0 ? 0 : height;
29                 obj.style.height = height + "px";
30             }
31         }, 30);
32     }