首页 > 代码库 > JavaScrip实现3D旋转动态效果

JavaScrip实现3D旋转动态效果

<!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" mrc="text/html; charset=utf-8"  content=""/>

<title>图片旋转展示</title>

<style type="text/css">

#show{

position:relative;

margin:20px auto;

width:800px;

border:1px solid #999999;

}

.item{

position:absolute;

height:40px;

width:60px;

background:#999999;

border:1px solid #eeeeee;

cursor:pointer;

}

</style>

<script type="text/javascript" language="javascript">  

 var len;  

 var showerObj;   

 var listObj;  

   var showerWidth = 500;//改变宽度   

  var showerHeight = 400;//改变 高度

    var r;    

var cR = 0;   

  var ccR = 0;  

   var timer = 0;  

   window.onload = function () {  

       showerObj = document.getElementById("show");   

      listObj = showerObj.getElementsByTagName("div");   

      len = listObj.length;  

       r = Math.PI / 180 * 360 / len;  

       for (var i = 0; i < len; i++) {    

         var item = listObj[i];        

     item.style.top = showerHeight / 2 + Math.sin(r * i) * showerWidth / 2 - 20 + "px";      

       item.style.left = showerWidth / 2 + Math.cos(r * i) * showerWidth / 2 - 30 + "px";   

          item.rotate = (r * i + 2 * Math.PI) % (2 * Math.PI);         

    //单击某一项事件          

   item.onclick = function () {  

               cR = Math.PI / 2 - this.rotate;    

             timer || (timer = setInterval(rotate, 10));

            }

        }     

    var rX = showerObj.offsetLeft + showerWidth / 2;     

    var ry = showerObj.offsetTop + showerHeight / 2;

        var rotate = function () {  

           ccR = (ccR + 2 * Math.PI) % (2 * Math.PI);     

        if (cR - ccR < 0) cR = cR + 2 * Math.PI;       

      if (cR - ccR < Math.PI) {         

        ccR = ccR + (cR - ccR) / 19;       

      } else {       

          ccR = ccR - (2 * Math.PI + ccR - cR) / 19;

            }

            if (Math.abs((cR + 2 * Math.PI) % (2 * Math.PI) - (ccR + 2 * Math.PI) % (2 * Math.PI)) < Math.PI / 720) {     

            ccR = cR;           

      clearInterval(timer);  

               timer = 0;         

    }

            for (var i = 0; i < len; i++) {   

              var item = listObj[i];            

     var w, h;          

       var sinR = Math.sin(r * i + ccR);    

             var cosR = Math.cos(r * i + ccR);   

              w = 60 + 0.6 * 60 * sinR;        

         h = (40 + 0.6 * 40 * sinR);       

          item.style.cssText += ";width:" + w + "px;height:" + h + "px;top:" + parseInt(showerHeight / 2 + sinR * showerWidth / 2 / 3 - w / 2) + "px;left:" + parseInt(showerWidth / 2 + cosR * showerWidth / 2 - h / 2) + "px;z-index:" + parseInt(showerHeight / 2 + sinR * showerWidth / 2 / 3 - w / 2) + ";";

            }     

    }

        document.getElementById("l").onclick = function () {     

        cR = (cR + r + 2 * Math.PI) % (2 * Math.PI);     

        timer || (timer = setInterval(rotate, 10));      

   }       

  document.getElementById("r").onclick = function () {     

        cR = (cR - r + 2 * Math.PI) % (2 * Math.PI);   

          timer || (timer = setInterval(rotate, 10));      

   }     

    rotate();   

  }

</script>

</head>

<body>

<input id="l" type="button" value="http://www.mamicode.com/left" />

<input id="r" type="button" value="http://www.mamicode.com/right" />

<div id="show">  

<div class="item">   

      <img src="http://www.mamicode.com/protosite/images/bg15.png" style="width:100%;height:100%" />  

</div>  

<div class="item">     

    <img src="http://www.mamicode.com/protosite/images/bg16.png" style="width:100%;height:100%" />  

</div>

 <div class="item">   

      <img src="http://www.mamicode.com/protosite/images/bg17.png" style="width:100%;height:100%" />

 </div>

 <div class="item">     

    <img src="http://www.mamicode.com/protosite/images/bg18.png" style="width:100%;height:100%" />

 </div>  

<div class="item">    

     <img src="http://www.mamicode.com/protosite/images/bg15.png" style="width:100%;height:100%" />  

</div>  

<div class="item">      

   <img src="http://www.mamicode.com/protosite/images/bg15.png" style="width:100%;height:100%" />

 </div>  

<div class="item">    

     <img src="http://www.mamicode.com/protosite/images/bg16.png" style="width:100%;height:100%" />

 </div>

 <!--<div class="item">8</div>

 <div class="item">9</div>

 <div class="item">0</div>

 <div class="item">a</div>

 <div class="item">b</div>

 <div class="item">1</div>

 <div class="item">2</div>

 <div class="item">3</div>-->

</div>

</body>

</html>