1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <style>
7 *{margin:0;padding:0; list-style:none;}
8 ul{width:410px; background:#ccc; position:absolute;top:300px; left:300px;}
9 ul li{width:100px; line-height:40px; font-size:20px; text-align:center; float:left;border:1px solid #000; position:relative; z-index:3; height:40px;}
10 #box li{z-index:2; height:0;}
11 .ha{border-left:2px solid #000;}
12 .he{border-right:2px solid #000;}
13 </style>
14 <script src="move.js"></script>
15 <script>
16 function rnd(n,m){
17 return Math.floor(Math.random()*(m-n)+n);
18 }
19 window.onload=function(){
20 var oUl=document.getElementById('ul1');
21 var aLi=oUl.children;
22 var oBox=document.getElementById('box');
23 var aLi1=oBox.children;
24 for(var i=0;i<aLi.length;i++){
25 (function(index){
26 aLi[i].onmouseover=function(){
27 aLi1[index].style.background='rgb('+rnd(1,256)+','+rnd(1,256)+','+rnd(1,256)+')';
28 move(aLi1[index],{height:40});
29 };
30 })(i);
31 (function(index){
32 aLi[i].onmouseout=function(){
33 move(aLi1[index],{height:0});
34 };
35 })(i);
36 }
37 };
38 </script>
39 </head>
40
41 <body>
42 <div>
43 <ul id="ul1">
44 <li class="ha">李少杰</li>
45 <li>张茜</li>
46 <li>大肥肥</li>
47 <li class="he">真噗噗</li>
48 </ul>
49 <ul id="box">
50 <li class="ha"></li>
51 <li></li>
52 <li></li>
53 <li class="he"></li>
54 </ul>
55 </div>
56 </body>
57 </html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0; list-style:none;}
ul{width:410px; background:#ccc; position:absolute;top:300px; left:300px;}
ul li{width:100px; line-height:40px; font-size:20px; text-align:center; float:left;border:1px solid #000; position:relative; z-index:3; height:40px;}
#box{top:341px; left:300px;}
#box li{ z-index:2; display:none;}
.ha{border-left:2px solid #000;}
.he{border-right:2px solid #000;}
</style>
<script src="move.js"></script>
<script>
function rnd(n,m){
return Math.floor(Math.random()*(m-n)+n);
}
window.onload=function(){
var oUl=document.getElementById('ul1');
var aLi=oUl.children;
var oBox=document.getElementById('box');
var aLi1=oBox.children;
for(var i=0;i<aLi.length;i++){
(function(index){
aLi[i].onmouseover=function(){
aLi1[index].style.background='rgb('+rnd(1,256)+','+rnd(1,256)+','+rnd(1,256)+')';
aLi1[index].style.float='none';
aLi1[index].style.position='absolute';
aLi1[index].style.display='block';
aLi1[index].style.top=0;
aLi1[index].style.left=102*index+'px';
move(aLi1[index],{top:-40,left:102*index,opacity:1});
};
aLi[i].onmouseout=function(){
move(aLi1[index],{top:0,left:102*index,opacity:0});
};
})(i);
}
};
</script>
</head>
<body>
<div>
<ul ></li>
</ul>
</div>
</body>
</html>