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>