JS旋转图片阵类-技术开发JavaScript技术-Ubuntu系统_Ubuntu服务器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS旋转图片阵效果 brought to you by 斩梦人.天天 qq:22062019</title> <style type="text/css"> body{background:black;color:white;font-family: Arial, Helvetica, sans-serif;font-size:16px;line-height:29px} span{border:1px solid gray;background:#333;padding:4px;font-weight:bold;} </style></head> <body> <span>使用方法</span>: 首先定义一个imgRound类: <span>var rt = new imgRound("imgContainer", 120, 90, 500, 220, 230, 0.01)</span> 然后使用定时函数调用imgRound实例的roundMove方法: <span>setInterval(function(){rt.roundMove()}, 20)</span> <script>     window.onload=function(){         var rt=new imgRound("imgContainer",120,90,300,80,230,0.01);         setInterval(function(){rt.roundMove()},20)     }     function imgRound(id,w,h,x,y,r,dv,rh,ah){         if (ah==undefined) ah=1;         if (rh==undefined) rh=10;         var dv=dv*ah; //旋转速度         var pi=3.1415926575;         var d=pi/2;         var pd=Math.asin(w/2/r);         var smove=true;         var imgArr=new Array();         var objectId=id;         var o=document.getElementById(objectId);         o.style.position="relative";         var arrimg=o.getElementsByTagName("img");         var pn=arrimg.length; //图片数量         var ed=pi*2/pn;         for (n=0;n  <img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/78d34f46c505e88a47f839f91559ded7.jpg"/> <img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/c7e3329de38ac2880409cce943b808e1.jpg"/> <img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/f87cc40a816710bf5a18eb5e9444e50b.jpg"/> <img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/6169b587d0e79d5c1faf941b3b1b7dde.jpg" link="http://www.baidu.com" target="_blank"/> <img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/50979afdfb9dd59333fc3da7baf9708f.jpg" link="http://www.google.com"/> <img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/78d34f46c505e88a47f839f91559ded7.jpg"/> <img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/c7e3329de38ac2880409cce943b808e1.jpg"/> <img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/f87cc40a816710bf5a18eb5e9444e50b.jpg"/>  参数说明: initRound(id,w,h,x,y,r,dv,rh,ah); id: 容器ID w: 图片宽度 h: 图片高度 x: 圆心水平位置 y: 圆心垂直位置 r: 圆圈半径 dv: 旋转速度 rh: 垂直距离 (可选,默认为10) ah: 旋转方向 (可选,1:顺时针,2:逆时针,默认为1) <body></html>

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

JavaScript技术：JS旋转图片阵类，转载需保留来源！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

相关文章阅读