站长资源 网络编程

JS旋转图片阵类

整理:jimmy2026/8/6浏览2次

简介JS旋转图片阵效果 brought to you by 斩梦人.天天 qq:22062019 body{background:black;color:white;font-family: Arial, Helvetica, sans-serif;font-size:16px;line-height

<!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> 使用方法: 首先定义一个imgRound类: var rt = new imgRound("imgContainer", 120, 90, 500, 220, 230, 0.01) 然后使用定时函数调用imgRound实例的roundMove方法: setInterval(function(){rt.roundMove()}, 20) <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  <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/s1.jpg');"><img src="/UploadFiles/2021-04-02/s1.jpg" alt="JS旋转图片阵类" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('http://www.lululu520.cn/blueidea/images/s2.jpg');"><img src="http://www.lululu520.cn/blueidea/images/s2.jpg" alt="JS旋转图片阵类" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/s3.jpg');"><img src="/UploadFiles/2021-04-02/s3.jpg" alt="JS旋转图片阵类" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('http://www.lululu520.cn/blueidea/images/s4.jpg');"><img src="http://www.lululu520.cn/blueidea/images/s4.jpg" alt="JS旋转图片阵类" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/s5.jpg');"><img src="/UploadFiles/2021-04-02/s5.jpg" alt="JS旋转图片阵类" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('http://www.lululu520.cn/blueidea/images/s1.jpg');"><img src="http://www.lululu520.cn/blueidea/images/s1.jpg" alt="JS旋转图片阵类" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/s2.jpg');"><img src="/UploadFiles/2021-04-02/s2.jpg" alt="JS旋转图片阵类" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('http://www.lululu520.cn/blueidea/images/s3.jpg');"><img src="http://www.lululu520.cn/blueidea/images/s3.jpg" alt="JS旋转图片阵类" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>  参数说明: 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 md5加密代码

下一篇：简明json介绍

站长资源 网络编程

JS旋转图片阵类

最新资源

一句话新闻

标签云