JS旋转图片阵类

时间:2020-05-12 人气:0

<!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<arrimg.length;n++){ 
            var lk=arrimg[n].getAttribute("link"); 
            if (lk!=null) arrimg[n].setAttribute("title",lk) 
            arrimg[n].onclick=function(){ 
                if (this.getAttribute("link")!=null){ 
                    if (this.getAttribute("target")!="_blank") window.location=(this.getAttribute("link")) 
                    else window.open(this.getAttribute("link")) 
                } 
            } 
            arrimg[n].onmouseout=function(){smove=true;} 
            arrimg[n].onmouseover=function(){smove=false;} 
            arrimg[n].style.position="absolute"; 
            imgArr.push(arrimg[n]); 
        } 
         
        this.roundMove=function(){ 
            for (n=0;n<=pn-1;n++){ 
                var o=imgArr[n]; 
                var ta=Math.sin(d+ed*n),strFilter; 
                if (ta<0) o.style.left=Math.cos(d+ed*n-pd)*r+x+"px"; 
                else o.style.left=Math.cos(d+ed*n+pd)*r+x+"px"; 
                o.style.top=ta*rh+rh+y+"px"; 
                var zoom=Math.abs(Math.sin((d+ed*n)/2+pi/4))*0.5+0.5; 
                o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*zoom*r+"px"; 
                o.style.height=zoom*h+"px"; 
                if (ta<0) {ta=(ta+1)*80+20;o.style.zIndex=0;} 
                else {ta=100;o.style.zIndex=1} 
                if (o.style.zIndex<=0) strFilter="FlipH(enabled:true)" 
                else strFilter="FlipH(enabled:false)"; 
                strFilter=strFilter+" alpha(opacity="+ta+")"; 
                o.style.opacity=ta/100; 
                o.style.filter=strFilter; 
            } 
            if (smove) d=d+dv; 
        } 
    } 
</script> 
<div> 
<img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25811.jpg"/> 
<img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25812.jpg"/> 
<img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25813.jpg"/> 
<img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25814.jpg" link="http://www.baidu.com" target="_blank"/> 
<img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25815.jpg" link="http://www.google.com"/> 
<img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25811.jpg"/> 
<img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25812.jpg"/> 
<img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25813.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需刷新才能执行]

加载全部内容