a-ling

导航

分享到 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>分享到</title>
  6         <style>
  7             #div1{
  8                 width: 150px;
  9                 height: 200px;
 10                 background: green;
 11                 position: absolute;
 12                 left: -150px;
 13             }
 14             #div1 span{
 15                 position: absolute;
 16                 width: 20px;
 17                 height: 60px;
 18                 line-height: 20px;
 19                 background: blue;
 20                 right: -20px;
 21                 top: 70px;
 22             }
 23             #div1 span:hover{
 24                 cursor: pointer;
 25             }
 26         </style>
 27     </head>
 28     <body>
 29         <div id="div1">
 30             <span>分享到</span>
 31         </div>
 32         <script>
 33             var oDiv = document.getElementById('div1');
 34             var timer = null;    
 35 //            方法一:
 36 //            function startMove(){
 37 //                var oDiv = document.getElementById('div1');
 38 //                
 39 //                clearInterval(timer);
 40 //                
 41 //                timer = setInterval(function(){
 42 //                    if(oDiv.offsetLeft == 0){
 43 //                        clearInterval(timer);
 44 //                    }else{
 45 //                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
 46 //                    }
 47 //                },30);
 48 //            }
 49 //            
 50 //            function stopMove(){
 51 //                var oDiv = document.getElementById('div1');
 52 //                
 53 //                clearInterval(timer);
 54 //                
 55 //                timer = setInterval(function(){
 56 //                    if(oDiv.offsetLeft == -150){
 57 //                        clearInterval(timer);
 58 //                    }else{
 59 //                        oDiv.style.left = oDiv.offsetLeft - speed + 'px';
 60 //                    }
 61 //                },30);
 62 //            }
 63 //
 64 //            oDiv.onmouseover = function(){
 65 //                startMove();
 66 //            }
 67 //            
 68 //            oDiv.onmouseout = function(){
 69 //                stopMove();
 70 //            }
 71             
 72             
 73 //            方法二:
 74 //            function move(target,speed){
 75 //                var oDiv = document.getElementById('div1');
 76 //                clearInterval(timer);
 77 //                timer = setInterval(function(){
 78 //                    if(oDiv.offsetLeft == target){
 79 //                        clearInterval(timer);
 80 //                    }else{
 81 //                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
 82 //                    }
 83 //                },30)
 84 //            }
 85 //            oDiv.onmouseover = function(){
 86 //                move(0,10);
 87 //            }
 88 //            
 89 //            oDiv.onmouseout = function(){
 90 //                move(-150,-10);
 91 //            }
 92 
 93 
 94 //            方法三:
 95             function move(target){
 96                 var oDiv = document.getElementById('div1');
 97                 clearInterval(timer);
 98                 timer = setInterval(function(){
 99                     var speed = 0;
100                     if(oDiv.offsetLeft > target){
101                         speed = -10;
102                     }else{
103                         speed = 10;
104                     }
105                     if(oDiv.offsetLeft == target){
106                         clearInterval(timer);
107                     }else{
108                         oDiv.style.left = oDiv.offsetLeft + speed + 'px';
109                     }
110                 },30)
111             }
112             oDiv.onmouseover = function(){
113                 move(0);
114             }
115             
116             oDiv.onmouseout = function(){
117                 move(-150);
118             }
119         </script>
120     </body>
121 </html>

效果：

 

posted on 2017-04-12 16:34  a-ling  阅读(121)  评论(0)  编辑  收藏  举报