<!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>