1 <!doctype html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>弹性运动---弹性菜单</title>
6 <style>
7 * {
8 padding: 0;
9 margin: 0;
10 }
11 li {
12 list-style: none;
13 }
14 ul {
15 width: 400px;
16 height: 30px;
17 position: relative;
18 margin: 100px auto 0;
19 }
20 li {
21 float: left;
22 width: 98px;
23 height: 28px;
24 line-height: 28px;
25 border: 1px solid #ccc;
26 text-align: center;
27 z-index: 2;
28 position: relative;
29 cursor: pointer;
30 }
31 .bg {
32 width: 100px;
33 height: 5px;
34 overflow: hidden;
35 background: red;
36 border: none;
37 position: absolute;
38 top: 24px;
39 left: 0;
40 z-index: 1;
41 }
42 </style>
43 <script type="text/javascript">
44 window.onload=function ()
45 {
46 var oUl=document.getElementById('ul1');
47 var aLi=oUl.getElementsByTagName('li');
48 var oBg=aLi[aLi.length-1];
49 var i=0;
50 for(i=0;i<aLi.length-1;i++)
51 {
52 aLi[i].index=i;
53 aLi[i].onmouseover=function ()
54 { // 移动的元素 当前对象 移动的属性
55 startMove(oBg,this,'left');
56 };
57 }
58 };
59
60 // 移动的元素 当前对象 移动的属性
61 function startMove(obj, index, attr)
62 {
63 iTarget=get_offset_val(index, attr);
64 obj.attr_name=get_offset_val(obj, attr);
65 if(iTarget==obj.attr_name)
66 return; // 如果选择的是当前的选中的元素
67 obj.iSpeed=0;
68 var iSpeed_dis=5;// 速度比值
69 var mc =0.7 ; // 摩擦大小 值越大元素停止运动时间越长 值越小元素停止运动的时间越快
70 // 防止开启多次定时器
71 clearInterval(obj.timer);
72 obj.timer=setInterval(backOut, 30);
73
74 // 弹性运动
75 function backOut()
76 {
77 // 加、减速运动 iTarget>obj.offsetLeft加速运动 iTarget<obj.offsetLeft减速运动
78 obj.iSpeed+=(iTarget-obj.attr_name)/iSpeed_dis;
79 // 摩擦运动 让元素停止运动
80 obj.iSpeed*=mc;
81 obj.attr_name+=obj.iSpeed; // 防止小数误差 ispeed 不是整数 ，把小数保留下来
82 //运动速度小1 并且目标点与元素距离小于1 停止运动
83 if(Math.abs(obj.iSpeed)<=1 && Math.abs(obj.attr_name-iTarget)<=1)
84 {
85 obj.style[attr]=iTarget+'px';
86 clearInterval(obj.timer);
87 }
88 else
89 {
90 obj.style[attr]= obj.attr_name+'px';
91 }
92 } //------------------ backOut() 结束
93 }
94
95 // 获取 offset 值
96 function get_offset_val(obj,attr)
97 {
98 switch(attr)
99 {
100 case 'left':
101 return obj.offsetLeft;
102 break;
103 case 'top':
104 return obj.offsetTop;
105 break;
106 case 'width':
107 return obj.offsetWidth;
108 break;
109 case 'height':
110 return obj.offsetHeight;
111 break;
112 }
113 }
114 </script>
115 </head>
116
117 <body>
118 <ul id="ul1">
119 <li>首页</li>
120 <li>关于我们</li>
121 <li>产品</li>
122 <li>联系方式</li>
123 <li class="bg"></li>
124 </ul>
125 </body>
126 </html>
