HTML5先行者高级交流群

html5先行者

欢迎加入学习讨论

专注前端，专注网页设计制作及网站开发项目 - (低价承接网站开发项目) QQ：370158739加入收藏RSS

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

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

2014-06-16 21:20:18 [小大] 已经帮助：人解决问题

了下代码,感觉用数组模拟有些僵硬,自己重新写了一个,请大家来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" id="p1" src="http://files.jb51.net/upload/20071228115115772.jpg"/> <img class="point" id="p2" src="http://files.jb51.net/upload/20071228115115527.jpg"/> <img class="point" id="p3" src="http://files.jb51.net/upload/20071228115115831.jpg"/> <img class="point" id="p4" src="http://files.jb51.net/upload/20071228115115794.jpg"/> <img class="point" id="p5" src="http://files.jb51.net/upload/20071228115116920.jpg"/> <img class="point" id="p6" src="http://files.jb51.net/upload/20071228115115772.jpg"/> <img class="point" id="p7" src="http://files.jb51.net/upload/20071228115115527.jpg"/> <img class="point" id="p8" src="http://files.jb51.net/upload/20071228115115831.jpg"/> </div>

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

（责任编辑：）

推荐书籍

推荐资讯

html5及css3做的3D小房子

html5及css3做的3D小

html5视频应用

html5视频应用

友情链接:联系人：QQ370158739

关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助