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;

800px;

border:1px solid #999999;

}

.item{

position:absolute;

height:40px;

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 += ";" + 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="left" />

<input id="r" type="button" value="right" />

<div id="show">

<div class="item">

      <img src="protosite/images/bg15.png" style="100%;height:100%" alt=""/>

</div>

<div class="item">

    <img src="protosite/images/bg16.png" style="100%;height:100%" alt=""/>

</div>

<div class="item">

      <img src="protosite/images/bg17.png" style="100%;height:100%" alt=""/>

</div>

<div class="item">

    <img src="protosite/images/bg18.png" style="100%;height:100%" alt=""/>

</div>

<div class="item">

     <img src="protosite/images/bg15.png" style="100%;height:100%" alt=""/>

</div>

<div class="item">

   <img src="protosite/images/bg15.png" style="100%;height:100%" alt=""/>

</div>

<div class="item">

     <img src="protosite/images/bg16.png" style="100%;height:100%" alt=""/>

</div>



</div>

</body>

</html>
相关阅读:
git archive
查看库的详细版本号，
locks
jquery中的DOM操作集锦
 Eclipse调试Bug的七种常用技巧
 eclipse如何修改dynamic web module version
Eclipse导入到web项目没有run on server
深入理解JavaScript系列
 10个好用的JQuery代码片段收集
 实现table样式的设定
原文地址：https://www.cnblogs.com/jf-guo/p/3899767.html