Home > Developer > Web Develop
1 <!doctype html> 2 3 4 <meta http-equiv="
content-type" content="text/html; Charset=utf-8" /> 5 <title></title>
<style>
* {padding:0; margin:0;} Body {background: #42509a;}
UL {width:800px; height:500px; border:1px solid #333; background: #05090e; overflow:hidden; position:relative; margi n: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; width: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>8Window.onload=function () {9 varOul=document.getelementbyid ('Ul_container');Ten varAli=oul.getelementsbytagname ('Li'); One varx=0; A vary=0; -document.onmousedown=function (EV) { - varOevent=ev | |Event; the vardisx=oevent.clientx-x; - vardisy=oevent.clienty-y; -Document.onmousemove=function (EV) { - varoevent=ev| |Event; +x= oevent.clientx-Disx; -y=oevent.clienty-Disy; + for(varI=0; i<ali.length;i++){ Aali[i].style.marginleft=x*ali[i].style.zindex/ -+'px'; atali[i].style.margintop=y*ali[i].style.zindex/ -+'px'; - } - }; -document.onmouseup=function () { -Document.onmousemove=NULL; -document.onmouseup=NULL; indocument.reseasecapture&&document.reseasecapture (); - }; todocument.setcapture&&document.setcapture (); + return false; - }; the }; *</script> $Panax Notoginseng -<body> the +<ul id="Ul_container"> A<li id="Pic1"style="Z-index:3;">"images/1.jpg"alt="123"/></li> the<li id="Pic2"style="Z-index:4;">"images/2.jpg"alt="123"/></li> +<li id="pic3"style="Z-index:5;">"images/3.jpg"alt="123"/></li> -<li id="Pic4"style="Z-index:4;">"images/4.jpg"alt="123"/></li> $<li id="pic6"style="Z-index:3;">"images/5.jpg"alt="123"/></li> $<li id="Pic7"style="Z-index:2;">"images/6.jpg"alt="123"/></li> -<li id="Pic8"style="Z-index:5;">"images/7.jpg"alt="123"/></li> -<li id="pic5"style="z-index:1;"></li> the</ul> - Wuyi the</body> -3D Visual Difference---native js+css
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
