เอฟเฟ็กต์สไลด์โชว์ภาพเคลื่อนไหวแบบกึ่งโปร่งใส

一种比较漂亮的控制上移动的网页特效

<style type="text/css"> #mainid{position:absolute;right:5px;top:10px;height:435px;width:650px;overflow:hidden;พื้นหลัง: #fff;ซ้าย: 400px;เส้นขอบ: 3px solid #666666;} .imgbox{position:absolute; ซ้าย:35px; ขอบบน:20px; ด้านบน:105px; ดัชนี z:90; ความกว้าง:100px;ความสูง:100px;พื้นหลัง:#ffffff} .moveimgbox{ตำแหน่ง:สัมบูรณ์; ซ้าย:700px; ขอบบน:20px; ด้านบน:105px; ดัชนี z:90; width:100px;height:100px;พื้นหลัง:#ffffff} </style> <script> var ติ๊ก=0; var okToGo = จริง; var currentCreature = 1; var ไปข้างหน้าถอยหลัง = 1; var firstnum = 1; var วินาที = 2; var tounum=1; ฟังก์ชั่น moveItem (firstnum, secnum) { ถ้า (okayToGo&& firstnum ! = secnum) { tounum = firstnum; document.getElementById("y"+firstnum).style.zIndex = 50+10*forwardBackward; document.getElementById("y"+secnum).style.zIndex = 50+20*ไปข้างหน้าถอยหลัง; startTheMove =window.setInterval(function(){rightOrLeft(firstnum,secnum)},20); } } ฟังก์ชั่น rightOrLeft(firstnum,secnum) { ถ้า (ทำเครื่องหมาย == 1020) { window.clearInterval(startTheMove); ทำเครื่องหมาย = 0; เดินหน้าถอยหลัง = 1; โอเคทูโก = จริง; } อื่น { okToGo = false; thisAngle = (Math.PI/2)*(ทำเครื่องหมาย/1,000); document.getElementById("y"+firstnum).style.left = " "+(735-Math.sin(thisAngle)*700)+"px"; document.getElementById("y"+firstnum).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle)*55))+"px"; document.getElementById("y"+secnum).style.left = " "+(735-Math.sin(thisAngle+Math.PI/2)*700)+"px"; document.getElementById("y"+secnum).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle+Math.PI/2)*55))+"px"; ทำเครื่องหมาย += 20; } } </script> <a href="javascript:moveItem(1,tounum);"><img src="/img/200406301.jpg" width="129" height="97"></a> < a href="javascript:moveItem(2,tounum);"><img src="/img/200406302.jpg" width="134" height="100"></a><br/> <a href= "javascript:moveItem(3,tounum);"><img src="/img/200406303.jpg" width="134" height="100"></a> <a href="javascript:moveItem(4, tounum);"><img src="/img/200406304.jpg" width="101" height="134"></a> <div align="right" id="mainid"> <div id=" y1" class="imgbox"><img src="/img/200406301.jpg" width="400" height="300"></div> <div id="y2" class="moveimgbox"><img src="/img/200406302.jpg" width="400" height="300"></div> <div id="y3" class="moveimgbox"><img src="/img/200406303.jpg" width="387" height="290"></div> <div id="y4" class="moveimgbox"><img src="/img/200406304.jpg" width="281" height="374" ></div> </div>