• 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 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>

  • 相关阅读:
    查看linux系统的版本
    单机运行环境搭建之 --CentOS-6.5安装配置Tengine
    nginx启动、重启、关闭
    JAVASE02-Unit010: 多线程基础 、 TCP通信
    俄罗斯方块小游戏
    JAVASE02-Unit09: 多线程基础
    JAVASE02-Unit08: 文本数据IO操作 、 异常处理
    JAVASE02-Unit07: 基本IO操作 、 文本数据IO操作
    JAVASE02-Unit06: 文件操作——File 、 文件操作—— RandomAccessFile
    JAVASE02-Unit05: 集合操作 —— 查找表
  • 原文地址:https://www.cnblogs.com/jf-guo/p/3899767.html
Copyright © 2020-2023  润新知