原生视觉差滚动---js+css;

时间：2023-12-10 15:25:14
 <!doctype html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title></title>

     <style>

         * { padding: ; margin: ; }

         body { background: #42509a; height:3000px;}

         ul { width: 800px; height: 500px; border: 1px solid #; background: #05090e; overflow: hidden; position: fixed;

             left:%; margin-left: -400px; top:%; margin-top: -250px;}

         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; width: 1422px; height: 1000px; background: url(../images/bg.jpg) no-repeat; }

         p{text-align:center; padding:10px ; color:#FFF;}

         p a{color:#FFF; text-decoration:none;}

         p a:hover{text-decoration:underline;}

     </style>

     <script>

         window.onload=window.onscroll=function(){

             var oUl=document.getElementById('ul_container');

             var aLi=oUl.children;

             var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

             for(var i=; i<aLi.length; i++){

                 aLi[i].style.marginTop=-scrollTop*aLi[i].style.zIndex/+'px';

             }

         };

     </script>

 </head>

 <body>

 <ul id="ul_container">

     <li id="pic1" style="z-index: 3;"><img src="data:images/1.jpg"  /></li>

     <li id="pic2" style="z-index: 4;"><img src="data:images/2.jpg"  /></li>

     <li id="pic3" style="z-index: 5;"><img src="data:images/3.jpg"  /></li>

     <li id="pic4" style="z-index: 4;"><img src="data:images/4.jpg"  /></li>

     <li id="pic6" style="z-index: 3;"><img src="data:images/5.jpg"  /></li>

     <li id="pic7" style="z-index: 2;"><img src="data:images/6.jpg"  /></li>

     <li id="pic8" style="z-index: 5;"><img src="data:images/7.jpg"  /></li>

     <li id="pic5" style="z-index: 1;"></li>

 </ul>

 </body>

 </html>

相关文章