瞅我干啥？

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::

原生图片360度旋转 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title></title>
 6 <style>
 7 #left{ position:absolute; left:0; top:0; width:50%; height:100%; background:red; opacity:0; filter:alpha(opacity:0);}
 8 #right{ position:absolute; right:0; top:0; width:50%; height:100%; background:#ccc; opacity:0; filter:alpha(opacity:0);}
 9 a{ cursor:default;}
10 body {margin:0;}
11 img {width:640px; height:378px; position:absolute; left:50%; top:50%; margin-top:-189px; margin-left:-320px;}
18 </style>
19 <script>
20 window.onload=function(){
21 var oLeft=document.getElementById('left');
22 var oRight=document.getElementById('right');
23 var oImg=document.getElementById('img1');
24 var timer=null;
25 var count=null;
26          
27          oLeft.onmouseover=function(){
28             
29              clearInterval(timer);
30              timer=setInterval(function(){
31                     count++;
32                     oImg.src='img/'+count+'.jpg';    
33                     if(count==76){
34                     count=0;
35                     }  
36             },100)
37              
38                          
39          }
40          oRight.onmouseover=function(){
41              clearInterval(timer);
42              timer=setInterval(function(){
43                     count--;
44                     oImg.src='img/'+count+'.jpg';    
45                     if(count<1){
46                     count=76;
47                     }  
48             },100)
49              
50                          
51          }
52 }
53 </script>
54 </head>
55 
56 <body>
57 <img id="img1" src="img/0.jpg" />
58 <a href="javascript:;" id="left"></a>
59 <a href="javascript:;" id="right"></a>
60 </body>
61 </html>

 

posted on 2016-08-17 23:43  瞅我干啥？  阅读(150)  评论(0)    收藏  举报