黑马程序员技术交流社区

标题: 分享——javascript实现360度旋转 [打印本页]
作者: java_dream    时间: 2014-9-18 21:44
标题: 分享——javascript实现360度旋转
  1. <html>
  2.   <head>
  3.     <style type="text/css">
  4.           body{background-image:url(images/body_bg.jpg);}
  5.           div#container{margin:100px auto;width:400px;height:255px;
  6.                         border:1px dashed blue;}
  7.         </style>
  8.         <script>
  9.         window.onload = function()
  10.         {
  11.                 var oDiv = document.getElementById('container');
  12.                 var oImg = document.getElementById('img1');
  13.                 var picNum = 0;

  15.                 run();

  17.                 oDiv.onmouseover = function(ev)
  18.                 {
  19.                         clearInterval(oDiv.timer);

  21.                         var oEv = ev || window.event;
  22.                         var disX = oEv.clientX;
  23.                         var disY = oEv.clientY;

  25.                         oDiv.onmousemove = function(ev)
  26.                         {
  27.                                 var oEv = ev || window.event;
  28.                                 var moveX = Math.abs(oEv.clientX - disX);
  29.                                     picNum = Math.round(moveX/10)%18+1;

  31.                                 oImg.src = 'images/image1_'+picNum+'.jpg';
  32.                                 document.title = picNum;
  33.                         }
  34.                         oDiv.onmouseout = function(ev)
  35.                         {
  36.                                 run();
  37.                         }
  38.                 }

  40.                 function run()
  41.                 {
  42.                         clearInterval(oDiv.timer);
  43.                         oDiv.timer = setInterval(function(){
  44.                            oImg.src = 'images/image1_'+(picNum%18+1)+'.jpg';
  45.                            document.title = picNum%18+1;
  46.                            picNum++;
  47.                     },300);
  48.                 }
  49.         }
  50.         </script>
  51.   </head>
  52.   <body>
  53.     <div id="container">
  54.           <img id="img1" src="images/image1_1.jpg" />
  55.         </div>
  56.   </body>
  57. </html>
复制代码


360deg.gif (524.12 KB, 下载次数: 17)

360旋转

360旋转

360度.rar

137.8 KB, 下载次数: 76

360旋转
作者: 八零、玖羚    时间: 2014-9-22 23:17
相当给力啊哥们
作者: 好听就好    时间: 2014-9-22 23:56
挺好的，多多分享这样的好程序
作者: 李国荧    时间: 2014-10-2 07:13
嗯，不错，学习下



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2