| <!Doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| *{margin:0;padding:0;} | |
| #div{100px;height:300px;background:green;position:absolute;left:-100px;} | |
| #div span{height:70px;background:yellow;position:absolute;top:100px;left:100px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="div"> | |
| <span>分享到</span> | |
| </div> | |
| <script> | |
| var odiv=document.getElementById('div'); | |
| odiv.onmouseover=function (){ | |
| ss(10,0); | |
| } | |
| odiv.onmouseout=function(){ | |
| ss(-10,-100); | |
| } | |
| var timer=null; | |
| function ss(aa,bb){ | |
| //bb目标 | |
| clearInterval(timer); | |
| timer=setInterval(function(){ | |
| if(odiv.offsetLeft==bb){ | |
| clearInterval(timer) | |
| }else{ | |
| odiv.style.left=odiv.offsetLeft+aa+'px'; | |
| } | |
| },33) | |
| } | |
| </script> | |
| </body> | |
| </html> |