软件开发培训班 >> 编程开发 >> JavaScript

JS旋转图片阵类

　　本文标签：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>

技术文章快速查找

web 页面分页打印的实现

用JavaScript创建“闪动”标题栏

Javascript中的转义用法实例代码

javascript 控制 html元素显示/隐藏实现代码

跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明

js原生appendChild的bug解决心得分享

jquery实现文本框鼠标右击无效以及不能输入的代码

IE 当eval遇上function的处理

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建