文章侧栏分享

最新推荐文章于 2021-06-28 22:05:40 发布

烧了回忆取暖

最新推荐文章于 2021-06-28 22:05:40 发布

阅读量411

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/kanuoyuan/article/details/24359153

版权

js 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

大多数网站，都有侧栏分享这一部分，能够把网页信息分享到微博，qq空间等等被自己的好友或者更多人看到，从而达到宣传网页或者吸引网页浏览游客的效果，对平面网页设计来说是一个很普遍有使用的js简单效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分享</title>
<style>
#div1{ width:200px; height:200px; background:yellow; position:absolute; top:50px; left:-200px;}
#div1 span{ width:20px; line-height:20px; background:blue; display:block; margin-left:200px;
margin-top:70px; position:absolute;}
</style>
<script>
window.οnlοad=function()
{
	var oDiv=document.getElementById('div1');
	
	oDiv.οnmοuseοver=function()
	{
		startMove(10,0);
	}
	
	oDiv.οnmοuseοut=function()
	{
		startMove(-10,-200);
	}
};

var timer=null;

function startMove(speed,iTarget)
{
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);
	
	timer=setInterval(function()
	{
		if(oDiv.offsetLeft==iTarget)
		{
			clearInterval(timer);
		}
		else
		{
		    oDiv.style.left=oDiv.offsetLeft+speed+'px';
		}
	},30);
	
};

</script>
</head>

<body>
<div id="div1">
   <span>分享到</span>
</div>
</body>
</html>