<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> body { height:2000px; } #box { 150px; height:300px; background:#ccc; position:fixed; left:-150px; font-size:14px; } #box span { 20px; padding:15px 0; text-align:center; background:#6cf; position:absolute; left:150px; } </style> </head> <body> <div id="box"><span>在线客服</span></div> <script type="text/javascript"> window.onload = function() { var box = document.getElementById("box"); box.onmouseover = function() { startMove(box,0); }; box.onmouseout = function() { startMove(box,-150); }; } var timer; function startMove(element,target) { clearInterval(timer); timer = setInterval(function() { var speed = 0; if(element.offsetLeft < target) { speed = 10; } else { speed = -10; } if(element.offsetLeft == target) { clearInterval(timer); } else { element.style.left = element.offsetLeft + speed + "px"; } },30); } </script> </body> </html>