妙味——分享到侧边栏 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
	margin: 0;
	padding: 0;
}
#div1{
	width: 100px;
	height: 200px;
	background: #ccc;
	position: absolute;
	top: 50px;
	left: -100px;
}
#div1 span{
	display: block;
	width: 20px;
	line-height: 20px;
	height: 60px;
	text-align: center;
	position: absolute;
	left: 100px;
	top: 70px;
	background: #fcf;
}
</style>
<script>
window.onload=function(){
	var oDiv = document.getElementById('div1');

	oDiv.onmouseover=function(){
		startMove(0);
	};
	oDiv.onmouseout=function(){
		startMove(-100);
	};
};


var timer = null;

function startMove(iTarget){
	var oDiv = document.getElementById('div1');

	clearInterval(timer);

	timer=setInterval(function(){

		var iSpeed=0;
		if(oDiv.offsetLeft<iTarget){
			iSpeed=10;
		}
		else{
			iSpeed=-10;
		}

		if(oDiv.offsetLeft==iTarget){
			clearInterval(timer);
		}
		else{
			oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
		}
	},30);
}
</script>
</head>
<body>
	<div id="div1">
		<span>分享到</span>
	</div>
</body>
</html>

　

posted @ 2013-12-16 23:22  白小虫  阅读(223)  评论(0)  编辑  收藏  举报