<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现边栏弹出动画</title> <style type="text/css"> *{margin:0;padding:0;} #box{width:200px;height:200px;background-color:#ccc;position:absolute;left:-200px;top:500px;} #share{display:block;font-size:16px;line-height:30px;font-family:微软雅黑;text-align:center;width:24px;height:60px;background-color:orange;position:absolute;left:200px;top:70px;} </style> <script type="text/javascript"> window.onload=function(){ var box=document.getElementById("box"); box.onmouseover = function(){ move(10) }; box.onmouseout = function(){ move(-10) }; } var timer; function move(spd){ clearInterval(timer); var box = document.getElementById(‘box‘); timer = setInterval(function(){ console.log(box.offsetLeft); if(box.offsetLeft == -100+10*spd){ clearInterval(timer); }else{ box.style.left=box.offsetLeft+spd+‘px‘; } },30); } </script> </head> <body> <div id="box" style=""><span id=‘share‘>分享</span></div> </body> </html>
遇到的问题及注意事项：
1、offset属性的值是数字，没有‘px’单位。
2、element.style只能获取内联式CSS的属性及用element.style.*=‘ ’设置的属性。非内联式CSS的属性使用element.getAttribute()方法获取。
原文：http://www.cnblogs.com/oliverliu/p/6855766.html