资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
JS旋转图片阵类
<!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> <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%20window.onload%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20rt%3Dnew%20imgRound(%22imgContainer%22%2C120%2C90%2C300%2C80%2C230%2C0.01)%3B%20%0D%0A%20%20%20%20%20%20%20%20setInterval(function()%7Brt.roundMove()%7D%2C20)%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20function%20imgRound(id%2Cw%2Ch%2Cx%2Cy%2Cr%2Cdv%2Crh%2Cah)%7B%20%0D%0A%20%20%20%20%20%20%20%20if%20(ah%3D%3Dundefined)%20ah%3D1%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(rh%3D%3Dundefined)%20rh%3D10%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20dv%3Ddv*ah%3B%20%2F%2F%E6%97%8B%E8%BD%AC%E9%80%9F%E5%BA%A6%20%0D%0A%20%20%20%20%20%20%20%20var%20pi%3D3.1415926575%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20d%3Dpi%2F2%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20pd%3DMath.asin(w%2F2%2Fr)%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20smove%3Dtrue%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20imgArr%3Dnew%20Array()%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20objectId%3Did%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20o%3Ddocument.getElementById(objectId)%3B%20%0D%0A%20%20%20%20%20%20%20%20o.style.position%3D%22relative%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%20var%20pn%3Darrimg.length%3B%20%2F%2F%E5%9B%BE%E7%89%87%E6%95%B0%E9%87%8F%20%0D%0A%20%20%20%20%20%20%20%20var%20ed%3Dpi*2%2Fpn%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%20var%20lk%3Darrimg%5Bn%5D.getAttribute(%22link%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(lk!%3Dnull)%20arrimg%5Bn%5D.setAttribute(%22title%22%2Clk)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20arrimg%5Bn%5D.onclick%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(this.getAttribute(%22link%22)!%3Dnull)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(this.getAttribute(%22target%22)!%3D%22_blank%22)%20window.location%3D(this.getAttribute(%22link%22))%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20window.open(this.getAttribute(%22link%22))%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%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.style.position%3D%22absolute%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20imgArr.push(arrimg%5Bn%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20this.roundMove%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20for%20(n%3D0%3Bn%3C%3Dpn-1%3Bn%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20o%3DimgArr%5Bn%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20ta%3DMath.sin(d%2Bed*n)%2CstrFilter%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(ta%3C0)%20o.style.left%3DMath.cos(d%2Bed*n-pd)*r%2Bx%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20o.style.left%3DMath.cos(d%2Bed*n%2Bpd)*r%2Bx%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20o.style.top%3Dta*rh%2Brh%2By%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20zoom%3DMath.abs(Math.sin((d%2Bed*n)%2F2%2Bpi%2F4))*0.5%2B0.5%3B%20%0D%0A%20%20%20%20%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))*zoom*r%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20o.style.height%3Dzoom*h%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(ta%3C0)%20%7Bta%3D(ta%2B1)*80%2B20%3Bo.style.zIndex%3D0%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20%7Bta%3D100%3Bo.style.zIndex%3D1%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(o.style.zIndex%3C%3D0)%20strFilter%3D%22FlipH(enabled%3Atrue)%22%20%0D%0A%20%20%20%20%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%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%20%20%20%20%20o.style.opacity%3Dta%2F100%3B%20%0D%0A%20%20%20%20%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%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(smove)%20d%3Dd%2Bdv%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%3C%2Fscript%3E"> <div id="imgContainer" style="width:600px;height:300px;border:1px solid red"> <img src="http://www.lululu520.cn/blueidea/images/s1.jpg" _ewebeditor_ta_src="http%3A%2F%2Fwww.lululu520.cn%2Fblueidea%2Fimages%2Fs1.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s2.jpg" _ewebeditor_ta_src="http%3A%2F%2Fwww.lululu520.cn%2Fblueidea%2Fimages%2Fs2.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s3.jpg" _ewebeditor_ta_src="http%3A%2F%2Fwww.lululu520.cn%2Fblueidea%2Fimages%2Fs3.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s4.jpg" _ewebeditor_ta_src="http%3A%2F%2Fwww.lululu520.cn%2Fblueidea%2Fimages%2Fs4.jpg" link="http://www.baidu.com" target="_blank"/> <img src="http://www.lululu520.cn/blueidea/images/s5.jpg" _ewebeditor_ta_src="http%3A%2F%2Fwww.lululu520.cn%2Fblueidea%2Fimages%2Fs5.jpg" link="http://www.google.com"/> <img src="http://www.lululu520.cn/blueidea/images/s1.jpg" _ewebeditor_ta_src="http%3A%2F%2Fwww.lululu520.cn%2Fblueidea%2Fimages%2Fs1.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s2.jpg" _ewebeditor_ta_src="http%3A%2F%2Fwww.lululu520.cn%2Fblueidea%2Fimages%2Fs2.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s3.jpg" _ewebeditor_ta_src="http%3A%2F%2Fwww.lululu520.cn%2Fblueidea%2Fimages%2Fs3.jpg"/> </div> 参数说明: 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需刷新才能执行
]
教程首页
更多教程