forked from Fzw-com/animate_demo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
menu-fluoroscopy.html
120 lines (115 loc) · 3.68 KB
/
menu-fluoroscopy.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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>菜单透视</title>
<style type="text/css">
#list {
margin: 30px auto 0;
padding: 0;
width: 643px;
position: relative;
}
#list li {
width: 120px;
height: 30px;
font-size: 18px;
line-height: 30px;
list-style: none;
float: left;
text-align: center;
background: #B0FF62;
color: #999;
border: 1px #CCCCCC solid;
margin-right: 5px;
padding: 0;
}
#list #mark {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#list #mark ul {
width: 643px;
position: absolute;
top: -1px;
left: -1px;
padding: 0;
}
#list #mark ul li {
color: #fff;
}
</style>
</head>
<script type="text/javascript">
window.onload = function () {
var oUl = document.getElementById("list");
var oMark = document.getElementById("mark");
var aBox = oUl.getElementsByClassName("box");
var childUl = oMark.getElementsByTagName("ul")[0];
var timer = null;
var timer2 = null;
var iSpeed = 0;
for (var i = 0; i < aBox.length; i++) {
aBox[i].onmouseover = function () {
clearInterval(timer2);
startMove(this.offsetLeft);
}
aBox[i].onmouseout = function () {
timer2 = setTimeout(function () {
startMove(0);//延迟定时器
}, 100)
}
}
oMark.onmouseover = function () {
clearInterval(timer2);
}
oMark.onmouseout = function () {
timer2 = setTimeout(function () {
startMove(0);
}, 100);
}
function startMove(iTarget) {
clearInterval(timer);
timer = setInterval(function () {
iSpeed += (iTarget - oMark.offsetLeft) / 6;
iSpeed = iSpeed * 0.75;
if (Math.abs(iSpeed) <= 1 && Math.abs(iTarget - oMark.offsetLeft) <= 1) {
clearInterval(timer);
oMark.style.left = iTarget + "px";
childUl.style.left = -iTarget + "px";
iSpeed = 0;
} else {
var H = oMark.offsetLeft + iSpeed//处理IE下宽高不能为负数（弹性过界问题）
if (H < 0) {
H = 0;
} else {
oMark.style.left = H + "px";
childUl.style.left = -oMark.offsetLeft + "px";//透视效果，childUl在最上面一层，oMark在往右边走的时候，childUl必须往左边走，才可以看到下一个标题,如果不加这句，子元素也会相对父级向右运动
}
}
}, 30)
}
}
</script>
<body>
<ul id="list" class="class_type">
<li id="mark" class="active">
<ul>
<li>国语</li>
<li>英语</li>
<li>数学</li>
<li>科学</li>
<li>社会</li>
</ul>
</li>
<li class="box">国语</li>
<li class="box">英语</li>
<li class="box">数学</li>
<li class="box">科学</li>
<li class="box">社会</li>
</ul>
</body>
</html>