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>