特漂亮的JS图片排列旋转效果代码_图象特效

了下代码,感觉用数组模拟有些僵硬,自己重新写了一个,请大家来pp!

<style type="text/css"> body{background:black} .point{position:absolute;height:75px;border:1px silver solid} #round{position:absolute;background:red;width:200px;height:200px;} </style> <script> var r=200,dv=0.01,w=100,x=400;y=100,pn=8 var pi=3.1415926575,d=pi/2; var pd=Math.asin(w/2/r);ed=pi*2/pn;smove=true function window.onload(){ var o=document.getElementById("imground"); var arrimg=o.getElementsByTagName("img"); for (n=0;n<arrimg.length;n++){ arrimg[n].onmouseout=function(){smove=true;} arrimg[n].onmouseover=function(){smove=false;} arrimg[n].onmousedown=function(){dv=dv*2} } setInterval(roundMove,20); } function roundMove(){ for (n=1;n<=8;n++){ var o=document.getElementById("p"+n) var ta=Math.sin(d+ed*n); var strFilter; if (ta<0) o.style.left=Math.cos(d+ed*n-pd)*r+x; else o.style.left=Math.cos(d+ed*n+pd)*r+x; o.style.top=ta*10+10+y; o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*r; o.style.zIndex=ta*10; if (o.style.zIndex<0) strFilter="FlipH(enabled:true)" else strFilter="FlipH(enabled:false)"; if (ta<0) ta=(ta+1)*80+20; else ta=100; strFilter=strFilter+" alpha(opacity="+ta+")"; o.style.opacity=ta/100; o.style.filter=strFilter; } if (smove) d=d+dv; } </script> <div id="imground"> <img class="point lazy" src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20071228115115772.jpg" id="p1" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > <img class="point lazy" src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20071228115115527.jpg" id="p2" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > <img class="point lazy" src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20071228115115831.jpg" id="p3" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > <img class="point lazy" src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20071228115115794.jpg" id="p4" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > <img class="point lazy" src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20071228115116920.jpg" id="p5" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > <img class="point lazy" src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20071228115115772.jpg" id="p6" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > <img class="point lazy" src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20071228115115527.jpg" id="p7" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > <img class="point lazy" src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20071228115115831.jpg" id="p8" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]