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 880px; 15 margin: 100px auto; 16 } 17 #ul1 li{ 18 200px; 19 height: 200px; 20 margin: 10px; 21 float: left; 22 position: relative; 23 overflow: hidden; 24 } 25 #ul1 li img{ 26 100%; 27 height: 100%; 28 } 29 #ul1 li span{ 30 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>