1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 #mod{
12 width: 500px;
13 margin: 20px auto 0;
14 }
15 #list{
16 list-style: none;
17 }
18 #list li{
19 float: left;
20 width: 100px;
21 height: 20px;
22 text-align: center;
23 }
24 #list a{
25 text-decoration: none;
26 color: black;
27 font-size: 20px;
28 }
29 #nav{
30 position: relative;
31 width: 500px;
32 height: 32px;
33 }
34
35 #slider{
36 position: absolute;
37 width: 100px;
38 height: 2px;
39 background: gray;
40 top: 30px;
41 }
42
43 </style>
44
45 <script type="text/javascript" src="js/tween.js">
46
47 </script>
48 </head>
49 <body>
50 <div id="mod">
51 <div id="nav">
52 <ul id="list">
53 <li><a href="#">按钮1</a></li>
54 <li><a href="#">按钮2</a></li>
55 <li><a href="#">按钮3</a></li>
56 <li><a href="#">按钮4</a></li>
57 <li><a href="#">按钮5</a></li>
58 </ul>
59 <div id="slider"></div>
60 </div>
61 </div>
62 </body>
63
64
65 <script type="text/javascript">
66 var ulList = document.getElementById("list");
67 // 获取到所有的li标签
68 var liArray = ulList.getElementsByTagName("li");
69 // 获取 slider
70 var sliderDiv = document.getElementById("slider");
71 var timer = null;
72
73 for (var i = 0; i < liArray.length;i++) {
74 liArray[i].selectIndex = i;
75 liArray[i].onmouseover = function(){
76 // 实现移动
77 // 清除上一次的滑动
78 clearInterval(timer);
79 move(this.selectIndex);
80 }
81 }
82
83 function move(index){
84
85 var t = 0;
86 var b = sliderDiv.offsetLeft;
87 var end = sliderDiv.offsetWidth * index;
88 var c = end - b;
89 var d = 30;
90 timer = setInterval(function(){
91 t++;
92 if(t >= d){
93 clearInterval(timer);
94 }
95 sliderDiv.style.left = Tween.Back.easeOut(t,b,c,d) +"px";
96 },10);
97
98 }
99
100
101 </script>
102 </html>