侧边栏：在线客服

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body { height:2000px; }
#box { width:150px; height:300px; background:#ccc; position:fixed; left:-150px; font-size:14px; }
#box span { width: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>

　　

 

 

 

 

posted @ 2012-09-19 23:38  赵小磊  阅读(668)  评论(0)    收藏  举报
回到头部