首页 > 编程 > JavaScript > 正文

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

2019-11-21 01:50:25

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：javascript下function声明一些小结

下一篇：收集的几个不错的javascript类小例子

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

荣耀总裁赵明乌镇演讲：荣耀首款5G手机V30下月发布

2019-10-23 09:17:05

搜狐张朝阳：回归媒体是搜狐重新崛起的关键

2019-10-21 09:20:02

华为轮值董事长郭平：虚拟技术创造现实价值

2019-10-21 09:00:12

滴滴英文服务上线两周年用户已超200万

2019-09-26 08:57:12

华为推出全球至快AI训练集群Atlas900

2019-09-25 08:46:36

马斯克：特斯拉正组建中国技术团队

2019-09-25 08:15:43

疑难解答

图片精选

网友关注