导航栏之抖动效果-CSDN博客

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>17-4-2</title>
 6     <style>
 7         *{padding: 0; margin: 0;}
 8         li{list-style: none;}
 9 
10         ul{width: 400px; height: 30px; position: relative; margin: 100px auto;}
11         li{float: left; width: 98px; height: 28px; line-height: 28px; border: 1px solid black; text-align: center; z-index: 2; position: relative; cursor: pointer;}
12         .bg{width: 100px; height: 5px; overflow: hidden; background: crimson; border: none;position: absolute; top: 24px; left: 0; z-index: 1;}
13     </style>
14     <script>
15         window.onload=function () {
16             var oUl=document.getElementById('ul1');
17             var aLi=oUl.getElementsByTagName('li');
18             var oBg=aLi[aLi.length-1];
19             var iSpeed=0;
20             
21             for(var i=0;i<aLi.length-1;i++){
22                 aLi[i].onmouseover=function () {
23                     startMove(oBg,this.offsetLeft);
24                 }
25             }
26             
27             function startMove(obj,iTarget) {
28                 clearInterval(obj.timer);
29                 obj.timer=setInterval(function () {
30                     iSpeed+=(iTarget-obj.offsetLeft)/5;  //5决定抖动幅度。
31                     iSpeed*=0.7;  //不断变化，直至为0。
32 
33                     obj.style.left=obj.offsetLeft+iSpeed+'px';
34                 },30)
35 
36             }
37         }
38     </script>
39 </head>
40 <body>
41 <ul id="ul1">
42     <li>首页</li>
43     <li>关于我们</li>
44     <li>产品</li>
45     <li>联系方式</li>
46     <li class="bg"></li>
47 </ul>
48 </body>
49 </html>