1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <style>
7 <style>
8 *{
9 margin: 0;
10 padding: 0;
11 list-style: none;
12 }
13 #ul1{
14 width: 880px;
15 margin: 100px auto;
16 }
17 #ul1 li{
18 width: 200px;
19 height: 200px;
20 margin: 10px;
21 float: left;
22 position: relative;
23 overflow: hidden;
24 }
25 #ul1 li img{
26 width: 100%;
27 height: 100%;
28 }
29 #ul1 li span{
30 width: 100%;
31 height: 100%;
32 position: absolute;
33 left: -200px;
34 top: 0;
35 background: red;
36 opacity: 0.3;
37 font-size: 50px;
38 line-height: 200px;
39 text-align: center;
40 color: #fff;
41 }
42 </style>
43 <script src="move.js"></script>
44 <script>
45 function enter(obj,oEvent){
46 var l=oEvent.clientX-obj.offsetLeft;
47 var r=obj.offsetLeft+obj.offsetWidth-oEvent.clientX;
48 var t=oEvent.clientY-obj.offsetTop;
49 var b=obj.offsetTop+obj.offsetHeight-oEvent.clientY;
50 switch(Math.min(l,r,t,b)){
51 case l:
52 return 'l';
53 break;
54 case r:
55 return 'r';
56 break;
57 case t:
58 return 't';
59 break;
60 case b:
61 return 'b';
62 break;
63 }
64 }
65 window.onload=function(){
66 var aLi=document.getElementsByTagName('li');
67 var aSpan=document.getElementsByTagName('span');
68 for(var i=0;i<aLi.length;i++){
69 aLi[i].onmouseenter=function(ev){
70 var oEvent=ev ||event;
71 var dir=enter(this,oEvent);
72 switch(dir){
73 case 'l':
74 this.children[0].style.left=-200+'px';
75 this.children[0].style.top=0+'px';
76 move(this.children[0],{left:0,top:0});
77 break;
78 case 'r':
79 this.children[0].style.left=200+'px';
80 this.children[0].style.top=0+'px';
81 move(this.children[0],{left:0,top:0});
82 break;
83 case 't':
84 this.children[0].style.left=0+'px';
85 this.children[0].style.top=-200+'px';
86 move(this.children[0],{left:0,top:0});
87 break;
88 case 'b':
89 this.children[0].style.left=0+'px';
90 this.children[0].style.top=200+'px';
91 move(this.children[0],{left:0,top:0});
92 break;
93 }
94 };
95 aLi[i].onmouseleave=function(ev){
96 var oEvent=ev ||event;
97 var dir=enter(this,oEvent);
98 switch(dir){
99 case 'l':
100 move(this.children[0],{left:-200,top:0});
101 break;
102 case 'r':
103 move(this.children[0],{left:200,top:0});
104 break;
105 case 't':
106 move(this.children[0],{left:-200,top:0});
107 break;
108 case 'b':
109 move(this.children[0],{left:200,top:0});
110 break;
111 }
112 };
113 }
114 };
115 </script>
116 </head>
117
118 <body>
119 <ul id="ul1">
120 <li><span>猫一</span><img src="cat/1.jpg"></li>
121 <li><span>猫二</span><img src="cat/2.jpg"></li>
122 <li><span>猫三</span><img src="cat/3.jpg"></li>
123 <li><span>猫四</span><img src="cat/4.jpg"></li>
124 <li><span>猫五</span><img src="cat/5.jpg"></li>
125 <li><span>猫六</span><img src="cat/6.jpg"></li>
126 <li><span>猫七</span><img src="cat/7.jpg"></li>
127 <li><span>猫八</span><img src="cat/8.jpg"></li>
128 </ul>
129 </body>
130 </html>
浙公网安备 33010602011771号