1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style> 7 * { padding: 0; margin: 0; } 8 body { background: #42509a; height:3000px;} 9 ul { 800px; height: 500px; border: 1px solid #333; background: #05090e; overflow: hidden; position: fixed; 10 left:50%; margin-left: -400px; top:50%; margin-top: -250px;} 11 li { position: absolute; list-style: none; } 12 #pic1 { top: 210px; left: 550px; } 13 #pic2 { top: 290px; left: 430px; } 14 #pic3 { top: 215px; left: 220px; } 15 #pic4 { top: 150px; left: 100px; } 16 #pic6 { top: 290px; left: 80px; } 17 #pic7 { top: 120px; left: 480px; } 18 #pic8 { top: 60px; left: 380px; } 19 #pic5 { top: -40px; left: -50px; 1422px; height: 1000px; background: url(../images/bg.jpg) no-repeat; } 20 21 p{text-align:center; padding:10px 0; color:#FFF;} 22 p a{color:#FFF; text-decoration:none;} 23 p a:hover{text-decoration:underline;} 24 </style> 25 <script> 26 window.onload=window.onscroll=function(){ 27 var oUl=document.getElementById('ul_container'); 28 var aLi=oUl.children; 29 30 var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; 31 for(var i=0; i<aLi.length; i++){ 32 aLi[i].style.marginTop=-scrollTop*aLi[i].style.zIndex/20+'px'; 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" /></li> 42 <li id="pic2" style="z-index: 4;"><img src="images/2.jpg" /></li> 43 <li id="pic3" style="z-index: 5;"><img src="images/3.jpg" /></li> 44 <li id="pic4" style="z-index: 4;"><img src="images/4.jpg" /></li> 45 <li id="pic6" style="z-index: 3;"><img src="images/5.jpg" /></li> 46 <li id="pic7" style="z-index: 2;"><img src="images/6.jpg" /></li> 47 <li id="pic8" style="z-index: 5;"><img src="images/7.jpg" /></li> 48 <li id="pic5" style="z-index: 1;"></li> 49 </ul> 50 51 52 </body> 53 </html>