1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title>
<style>
* { padding: 0; margin: 0; }body { background: #42509a; }
ul { 800px; height: 500px; border: 1px solid #333; background: #05090e; overflow: hidden; position: relative; margin: 50px auto 0; }
li { position: absolute; list-style: none; }
#pic1 { top: 210px; left: 550px; }
#pic2 { top: 290px; left: 430px; }
#pic3 { top: 215px; left: 220px; }
#pic4 { top: 150px; left: 100px; }
#pic6 { top: 290px; left: 80px; }
#pic7 { top: 120px; left: 480px; }
#pic8 { top: 60px; left: 380px; }
#pic5 { top: -40px; left: -50px; 1422px; height: 1000px; background: url(../images/bg.jpg) no-repeat; }
p{text-align:center; padding:10px 0; color:#FFF;}
p a{color:#FFF; text-decoration:none;}
p a:hover{text-decoration:underline;}
</style> 7 <script> 8 window.onload=function(){ 9 var oUl=document.getElementById('ul_container'); 10 var aLi=oUl.getElementsByTagName('li'); 11 var x=0; 12 var y=0; 13 document.onmousedown=function(ev){ 14 var oEvent=ev || event; 15 var disX=oEvent.clientX-x; 16 var disY=oEvent.clientY-y; 17 document.onmousemove=function(ev){ 18 var oEvent=ev||event; 19 x= oEvent.clientX-disX; 20 y=oEvent.clientY-disY; 21 for(var i=0;i<aLi.length;i++){ 22 aLi[i].style.marginLeft=x*aLi[i].style.zIndex/20+'px'; 23 aLi[i].style.marginTop=y*aLi[i].style.zIndex/20+'px'; 24 } 25 }; 26 document.onmouseup=function(){ 27 document.onmousemove=null; 28 document.onmouseup=null; 29 document.reseaseCapture&&document.reseaseCapture(); 30 }; 31 document.setCapture&&document.setCapture(); 32 return false; 33 }; 34 }; 35 </script> 36 </head> 37 38 <body> 39 40 <ul id="ul_container"> 41 <li id="pic1" style="z-index: 3;"><img src="images/1.jpg" alt="123" /></li> 42 <li id="pic2" style="z-index: 4;"><img src="images/2.jpg" alt="123" /></li> 43 <li id="pic3" style="z-index: 5;"><img src="images/3.jpg" alt="123" /></li> 44 <li id="pic4" style="z-index: 4;"><img src="images/4.jpg" alt="123" /></li> 45 <li id="pic6" style="z-index: 3;"><img src="images/5.jpg" alt="123" /></li> 46 <li id="pic7" style="z-index: 2;"><img src="images/6.jpg" alt="123" /></li> 47 <li id="pic8" style="z-index: 5;"><img src="images/7.jpg" alt="123" /></li> 48 <li id="pic5" style="z-index: 1;"></li> 49 </ul> 50 51 52 </body> 53 </html>