侧边框伸缩 

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>标题</title>
 6     <meta name="keywords" content="">
 7     <meta name="description" content="">
 8     <style>
 9     *{
10         margin: 0px;
11         padding: 0px;
12     }
13         #div1{
14             width: 200px;
15             height: 200px;
16             background-color: blue;
17             position: relative;
18             top: 0px;
19             left: -200px;
20         }
21         span{
22             width:20px;
23             height: 50px;
24             cursor: pointer;
25             position: absolute;
26             top: 60px;
27             left: 200px;
28             background-color: red;
29             padding-top: 20px;
30         }
31     </style>
32 </head>
33 <body>
34     <div id="div1"><span>分享</span></div>
35     <script>
36         var div1=document.getElementById('div1');
37         var timer1=null;
38         var timer2=null;
39         var i=-200;
40         div1.onmouseover=function(){
41             clearInterval(timer1);
42             clearInterval(timer2);
43             timer1=setInterval(function() {
44                 i++;
45                 if (i>=0) {
46                     i=0;
47                 };
48                 div1.style.left=i+"px";
49             },10)
50     
51         }
52         div1.onmouseout=function(){
53             clearInterval(timer1);
54             clearInterval(timer2);
55             timer2=setInterval(function() {
56                 i--;
57                 
58                 if (i<=-200) {
59                     i=-200;
60                 };
61                 div1.style.left=i+"px";
62             },10)
63     
64         }
65         /*div1.onmouseover=function(){
66             clearInterval(timer1);
67             clearInterval(timer2);
68             startmove();
69         }
70         div1.onmouseout=function(){
71             clearInterval(timer1);
72             clearInterval(timer2);
73             stopmove();
74             //alert(1)
75         }
76         function startmove(){
77             
78             timer1=setInterval(function(){
79                 if (div1.offsetLeft==0) {
80                     clearInterval(timer1);
81                     clearInterval(timer2);
82                 }else{
83                     div1.style.left=div1.offsetLeft+1+"px";
84                 }
85             },1)
86         }
87         function stopmove(){
88             timer2=setInterval(function(){
89                 if (div1.offsetLeft==-200) {
90                     clearInterval(timer2);
91                     clearInterval(timer1);
92                 }else{
93                     div1.style.left=div1.offsetLeft-1+"px";
94                 }
95             },1)
96         }*/
97     </script>
98 </body>
99 </html>
View Code

 

posted @ 2016-08-28 18:01  舍近求猿  阅读(106)  评论(0)    收藏  举报