-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy path041-运动框架.html
59 lines (56 loc) · 1.32 KB
/
041-运动框架.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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{ padding:0; margin:0; border:0; list-style-type:none;}
ul{ width:360px; margin:50px auto 0 auto; position:relative;}
ul li{ width:98px; height:98px; float:left; border:1px solid #6E4142; background:#ccc; margin:10px; z-index:0;}
</style>
<script type="text/javascript" src="js/move2.js"></script>
<script>
window.onload = function()
{
var oUl1 = document.getElementById("ul1");
var aLi = oUl1.getElementsByTagName("li");
var minZindex = 1;
for(var i = 0; i < aLi.length; i++)
{
//aLi[i].innerHTML = "left:" + aLi[i].offsetLeft + "<br/>top:"+ aLi[i].offsetTop;
aLi[i].style.left = aLi[i].offsetLeft + "px";
aLi[i].style.top = aLi[i].offsetTop + "px";
}
for(var i = 0; i < aLi.length; i++)
{
aLi[i].style.position = "absolute";
aLi[i].style.margin = "0";
var w = aLi[i].offsetWidth;
var h = aLi[i].offsetHeight;
aLi[i].onmouseover = function()
{
this.style.zIndex = minZindex++;
startMove(this,{ width:(w+50),height:(h+50),marginLeft:-25,marginTop:-25});
}
aLi[i].onmouseout = function()
{
startMove(this,{ width:98,height:98,marginLeft:0,marginTop:0});
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>