JS旋转图片阵类

156 阅读 0 评论 103 点赞

我是靠谱客的博主愉快诺言，最近开发中收集的这篇文章主要介绍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>
 
<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 
<div id="imgContainer" style="width:600px;height:300px;border:1px solid red"> 
<img src="http://www.lululu520.cn/blueidea/images/s1.jpg"/> 
<img src="http://www.lululu520.cn/blueidea/images/s2.jpg"/> 
<img src="http://www.lululu520.cn/blueidea/images/s3.jpg"/> 
<img src="http://www.lululu520.cn/blueidea/images/s4.jpg" link="http://www.baidu.com" target="_blank"/> 
<img src="http://www.lululu520.cn/blueidea/images/s5.jpg" link="http://www.google.com"/> 
<img src="http://www.lululu520.cn/blueidea/images/s1.jpg"/> 
<img src="http://www.lululu520.cn/blueidea/images/s2.jpg"/> 
<img src="http://www.lululu520.cn/blueidea/images/s3.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需刷新才能执行]