-
Notifications
You must be signed in to change notification settings - Fork 6
/
043-弹性运动竖.html
71 lines (69 loc) · 1.76 KB
/
043-弹性运动竖.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{ padding:0; margin:0; border:0; list-style-type:none; text-decoration:none;}
.nav ul{ clear:both; margin:50px auto 0 auto; position:relative; background:#ccc; display:block; overflow:hidden; width:100px; height:255px; }
.nav ul li{ width:100px; height:50px; line-height:50px; text-align:center; z-index:2;position:relative; border-bottom:1px solid #BFBFBF;}
.nav ul li a{ color:#424242; display:block;}
.nav ul li.on a{ color:#FFFFFF;}
#bg{ position:absolute; width:100px; height:50px; left:0; top:0; background:#9F893C; z-index:1; overflow:hidden; border:none;}
</style>
<script>
window.onload = function()
{
var oUl1 = document.getElementById("ul1");
var aLi = oUl1.getElementsByTagName("li");
var oBg = document.getElementById("bg");
for(var i = 0; i < aLi.length - 1; i++)
{
aLi[0].className= "on";
aLi[i].onmouseover = function()
{
for(var j = 0; j < aLi.length - 1; j++)
{
aLi[j].className= ""
}
this.className= "on"
startMove(oBg,this.offsetTop);
}
}
}
var ispeed = 0;
var oTop = 0;
function startMove(obj,iTarget)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
ispeed += (iTarget - obj.offsetTop) / 5;
ispeed *= 0.7;
oTop += ispeed;
if(Math.abs(ispeed) < 1 && Math.abs(oTop - iTarget) < 1)
{
clearInterval(obj.timer);
obj.style.top = iTarget + "px";
}
else
{
obj.style.top = oTop + "px";
}
document.title=obj.style.top;
},30);
}
</script>
</head>
<body>
<div class="nav">
<ul id="ul1">
<li><a href="#">首页</a></li>
<li><a href="#">网站简介</a></li>
<li><a href="#">网站简介</a></li>
<li><a href="#">网站简介</a></li>
<li><a href="#">网站简介</a></li>
<li id="bg"></li>
</ul>
</div>
</body>
</html>