首頁網(wǎng)頁特效庫

首頁 > 特效 > 圖片特效 > 正文

漂亮的圖片移動控制特效

2009-11-26 圖片特效 ℃

<style type="text/css"> #mainid{position:absolute;right:5px;top:10px;height:435px;width:650px;overflow:hidden;background:#fff;left: 400px;border: 3px solid #666666;} .imgbox{position:absolute; left:35px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff} .moveimgbox{position:absolute; left:700px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff} </style> <script> var ticked=0; var okayToGo = true; var currentCreature = 1; var forwardBackward = 1; var firstnum = 1; var secnum = 2; var tounum=1; function moveItem(firstnum,secnum){ if(okayToGo&& firstnum != secnum){ tounum=firstnum; document.getElementById("y"+firstnum).style.zIndex = 50+10*forwardBackward; document.getElementById("y"+secnum).style.zIndex = 50+20*forwardBackward; startTheMove =window.setInterval(function(){rightOrLeft(firstnum,secnum)},20); } } function rightOrLeft(firstnum,secnum) { if (ticked == 1020) { window.clearInterval(startTheMove); ticked = 0; forwardBackward = 1; okayToGo = true; } else { okayToGo = false; thisAngle = (Math.PI/2)*(ticked/1000); 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"; ticked += 20; } } </script> <a href="javascript:moveItem(1,tounum);"><img src="/images/tx/s1.jpg" width="129" height="97"></a> <a href="javascript:moveItem(2,tounum);"><img src="/images/tx/s2.jpg" width="134" height="100"></a><br/> <a href="javascript:moveItem(3,tounum);"><img src="/images/tx/s3.jpg" width="134" height="100"></a> <a href="javascript:moveItem(4,tounum);"><img src="/images/tx/s4.jpg" width="101" height="134"></a> <div align="right" id="mainid"> <div   class="xz44sj9"   id="y1" class="imgbox"><img src="/images/tx/1.jpg" width="500" height="300"></div> <div   class="vxobrg4"   id="y2" class="moveimgbox"><img src="/images/tx/2.jpg" width="500" height="300"></div> <div   class="dfsg22c"   id="y3" class="moveimgbox"><img src="/images/tx/3.jpg" width="500" height="300"></div> <div   class="lplcwjt"   id="y4" class="moveimgbox"><img src="/images/tx/4.jpg" width="500" height="300"></div> </div>

相關特效代碼

熱門特效代碼: js圖片自動切換代碼; CSS實現(xiàn)區(qū)域內(nèi)等比例放大縮小圖片; JS圖片切換效果; 飄動圖片廣告代碼; 鼠標經(jīng)過圖片變大; 簡單高效的javascript 幻燈片播放; JavaScript封裝的平滑圖片滾動，; 點擊圖片出現(xiàn)大圖; 圖片局部放大效果特效; 圖片上下左右拉伸效果特效

推薦特效代碼: 點擊按鈕淡入淡出彈出圖文信息; 探照燈效果圖片特效代碼; 簡單高效的javascript 幻燈片播放; 飄動圖片廣告代碼; JavaScript封裝的平滑圖片滾動，; 超酷超絢精美圖片展示效果代碼

<center id="tiq9x"><listing id="tiq9x"></listing></center>

<ol id="tiq9x"><small id="tiq9x"></small></ol><bdo id="tiq9x"><small id="tiq9x"></small></bdo>