管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

特漂亮的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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%20%20%20%20var%20r%3D200%2Cdv%3D0.01%2Cw%3D100%2Cx%3D400%3By%3D100%2Cpn%3D8%20%0D%0A%20%20%20%20var%20pi%3D3.1415926575%2Cd%3Dpi%2F2%3B%20%0D%0A%20%20%20%20var%20pd%3DMath.asin(w%2F2%2Fr)%3Bed%3Dpi*2%2Fpn%3Bsmove%3Dtrue%20%0D%0A%20%20%20%20function%20window.onload()%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20o%3Ddocument.getElementById(%22imground%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20arrimg%3Do.getElementsByTagName(%22img%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20for%20(n%3D0%3Bn%3Carrimg.length%3Bn%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20arrimg%5Bn%5D.onmouseout%3Dfunction()%7Bsmove%3Dtrue%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20arrimg%5Bn%5D.onmouseover%3Dfunction()%7Bsmove%3Dfalse%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20arrimg%5Bn%5D.onmousedown%3Dfunction()%7Bdv%3Ddv*2%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20setInterval(roundMove%2C20)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20function%20roundMove()%7B%20%0D%0A%20%20%20%20%20%20%20%20for%20(n%3D1%3Bn%3C%3D8%3Bn%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20o%3Ddocument.getElementById(%22p%22%2Bn)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20ta%3DMath.sin(d%2Bed*n)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20strFilter%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(ta%3C0)%20%20%20%20o.style.left%3DMath.cos(d%2Bed*n-pd)*r%2Bx%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20else%20o.style.left%3DMath.cos(d%2Bed*n%2Bpd)*r%2Bx%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.top%3Dta*10%2B10%2By%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.width%3DMath.abs(Math.cos(d%2Bed*n%2Bpd)-Math.cos(d%2Bed*n-pd))*r%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.zIndex%3Dta*10%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(o.style.zIndex%3C0)%20strFilter%3D%22FlipH(enabled%3Atrue)%22%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20else%20strFilter%3D%22FlipH(enabled%3Afalse)%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(ta%3C0)%20ta%3D(ta%2B1)*80%2B20%3B%20else%20ta%3D100%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20strFilter%3DstrFilter%2B%22%20alpha(opacity%3D%22%2Bta%2B%22)%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.opacity%3Dta%2F100%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.filter%3DstrFilter%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20if%20(smove)%20d%3Dd%2Bdv%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%3C%2Fscript%3E"> 
<div id="imground"> 
<img class="point" id="p1" src="http://files.glzy8.com/upload/20071228115115772.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20071228115115772.jpg"/> 
<img class="point" id="p2" src="http://files.glzy8.com/upload/20071228115115527.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20071228115115527.jpg"/> 
<img class="point" id="p3" src="http://files.glzy8.com/upload/20071228115115831.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20071228115115831.jpg"/> 
<img class="point" id="p4" src="http://files.glzy8.com/upload/20071228115115794.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20071228115115794.jpg"/> 
<img class="point" id="p5" src="http://files.glzy8.com/upload/20071228115116920.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20071228115116920.jpg"/> 
<img class="point" id="p6" src="http://files.glzy8.com/upload/20071228115115772.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20071228115115772.jpg"/> 
<img class="point" id="p7" src="http://files.glzy8.com/upload/20071228115115527.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20071228115115527.jpg"/> 
<img class="point" id="p8" src="http://files.glzy8.com/upload/20071228115115831.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20071228115115831.jpg"/> 
</div>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程