标签：relative 技术 span osi interval idt element font for
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>
效果图：
标签：relative 技术 span osi interval idt element font for
原文地址：http://www.cnblogs.com/miaoxiaojiao/p/7137643.html
