js 弹性菜单 

  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>

 

posted @ 2018-02-21 15:48  柔和的天空  阅读(254)  评论(0)    收藏  举报