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><div id="imgContainer" style="width:600px;height:300px;border:1px solid red"> <img src="https://ss.0133.cn/article/a2/be/ca/a2beca26e0ab17455db7ba09d77e10d8.jpg-600"/><img src="https://ss.0133.cn/article/93/87/db/9387dbea99e9b5737b293a40593d5f13.jpg-600"/><img src="https://ss.0133.cn/article/ad/09/c1/ad09c19aaa7d0a0b17a22e49db99a677.jpg-600"/><img src="https://ss.0133.cn/article/ec/c1/e7/ecc1e71e98630437418aa71c37a7dee5.jpg-600" link="http://www.baidu.com" target="_blank"/><img src="https://ss.0133.cn/article/33/08/cb/3308cbd83186b013222a7f8ce27c6316.jpg-600" link="http://www.google.com"/><img src="https://ss.0133.cn/article/a2/be/ca/a2beca26e0ab17455db7ba09d77e10d8.jpg-600"/><img src="https://ss.0133.cn/article/93/87/db/9387dbea99e9b5737b293a40593d5f13.jpg-600"/><img src="https://ss.0133.cn/article/ad/09/c1/ad09c19aaa7d0a0b17a22e49db99a677.jpg-600"/></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需再刷新一下页面才能执行]

以上就是JS旋转图片阵类的详细内容，更多请关注0133技术站其它相关文章！

相关文章

前端开发

置顶推荐

猜你喜欢