JavaScript实现图片旋转构成3D圆环代码

代码简介：

很炫的图片展示特效，由一组图片构成一个3D的圆环状，并自动旋转，鼠标放到某一图片上会自动停止，JavaScript 的功能真够强大，你是不是后悔没有学好JS呢？

代码内容：

View Code

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="www.w3.org/1999/xhtml" >
< head >
< title > JavaScript实现图片旋转构成3D圆环代码 - www.webdm.cn title >
< meta  http-equiv ="content-Type"  content ="text/html;charset=gb2312" >
< style  type ="text/css" >
body { background : black ; color : white ; line-height : 29px ; }
span { border : 1px solid gray ; background : #333 ; padding : 4px ; font-weight : bold ; }
style >
< script  language ="javascript" >
    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 >
head >
< body >
< div  id ="imgContainer"  style ="width:600px;height:300px;border:1px solid red" >
< img  src ="http://www.webdm.cn/images/wall1_s.jpg"  link ="/"  target ="_blank" >
< img  src ="http://www.webdm.cn/images/wall2_s.jpg"  link ="/"  target ="_blank" >
< img  src ="http://www.webdm.cn/images/wall3_s.jpg"  link ="/"  target ="_blank" >
< img  src ="http://www.webdm.cn/images/wall4_s.jpg"  link ="/"  target ="_blank" >
< img  src ="http://www.webdm.cn/images/wall5_s.jpg"  link ="/"  target ="_blank" >
< img  src ="http://www.webdm.cn/images/wall1_s.jpg"  link ="/"  target ="_blank" >
< img  src ="http://www.webdm.cn/images/wall2_s.jpg"  link ="/"  target ="_blank" >
< img  src ="http://www.webdm.cn/images/wall3_s.jpg"  link ="/"  target ="_blank" >
div >
body >
html >
< br  />
< p >< a  href ="http://www.webdm.cn" > 网页代码站 a >  - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！ p >
代码来自：http://www.webdm.cn/webcode/1b2f7194-49fe-4e96-9469-07200a910095.html

 

 

转载于:https://www.cnblogs.com/webdm/archive/2011/09/02/2163404.html