ちょうきょう666

导航

javascript9分享到菜单，菜单在屏幕左侧的移出和收回 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             #div1{width: 100px;height: 200px;background-color: grey;position: absolute;left: -100px;top: 400px;}
 8             #div1 span{width: 20px;height: 60px;background-color: orange;position: absolute;left: 100px;top: 70px;line-height: 20px;}
 9         </style>
10         <script>
11             window.onload=function(){
12                 var oDiv1=document.getElementById("div1");
13                 oDiv1.onmouseover=function(){
14                     startMove(5,0);
15                 }
16                 oDiv1.onmouseout=function(){
17                     startMove(-5,-100);
18                 }
19                 var timer=null;
20                 function startMove(speed,iTarget){
21                 var oDiv1=document.getElementById("div1");
22                     // var speed=5;
23                     clearInterval(timer);
24                 timer=setInterval(function(){
25                         if(oDiv1.offsetLeft==iTarget){
26                              clearInterval(timer);
27                         }else{
28                             oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
29                         }
30                     },30);
31                 }
32                 // function startMove2(){
33                 // var oDiv1=document.getElementById("div1");
34                 //     var speed=-5;
35                 //     clearInterval(timer);
36                 // timer=setInterval(function(){
37                 //         if(oDiv1.offsetLeft==-100){
38                 //              clearInterval(timer);
39                 //         }else{
40                 //             oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
41                 //         }
42                 //     },30);
43                 // }
44             }
45         </script>
46     </head>
47     <body>
48         <div id="div1">
49             <span>分享到</span>
50         </div>
51     </body>
52 </html>

 

posted on 2020-12-18 14:27  ちょうきょう666  阅读(137)  评论(0)    收藏  举报