“分享到”效果制作

大家上网时一般都有发现,某些网站的左侧或右侧会有一个“分享到”的小效果,当鼠标移上去时,它隐藏的部份就会显示出来。

下面我就展示出源代码给大家参考一下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<style type="text/css">
	*{margin:0; padding:0;}
	a{text-decoration:none;}
	a:hover{color:red;}
	#box{
		width:200px;
		height:auto;
		position:fixed;
		top:300px;
		left:-200px;
		text-align:center;
		background:#0f0;
	}
	#box li{
		height:40px;
		line-height:40px;
		font-size:20px;
		list-style:none;
	}
	.share{
		font-size:24px;
		display:block;
		width:35px;
		line-height:40px;
		position:absolute;
		left:200px;
		top:35px;
		background:#ccc;
		cursor:pointer;
		border-top-right-radius:15px;
		border-bottom-right-radius:15px;
	}
</style>
<script>
	window.onload=function(){
		var oBox=document.getElementById("box");
		var speed=0;//定义存入运动速度的变量
		var timer=null;//定义存放定时器的变量
		oBox.onmouseover=function(){
			yundong44(0);//将left的目标偏移量设置为0
		}
		oBox.onmouseout=function(){
			yundong44(-200);//将left的目标偏移量设置为-200
		}
		
		function yundong44(leftLast){//leftLast为left的目标偏移量
			clearInterval(timer);
			if(leftLast<oBox.offsetLeft){//left的目标偏移量小于当前left的偏移量时
				speed=-10;
			}else{
				speed=10;
			}
			timer=setInterval(function(){
				if(oBox.offsetLeft==leftLast){
					clearInterval(timer);
				}else{
					oBox.style.left=oBox.offsetLeft+speed+"px";
				}
			},30);
		}
	}
</script>
	
</head>

<body>
	
	<div id="box">
		<ul>
			<li><a href="#">淘宝</a></li>
			<li><a href="#">京东</a></li>
			<li><a href="#">拼多多</a></li>
			<li><a href="#">亚马逊</a></li>
			<li><a href="#">heartmv.com</a></li>
		</ul>
		<span class="share" href="#">分享到</span>
	</div>
	
</body>
</html>

在浏览器中,当鼠标移上去后的效果如下图所示:

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:, ,
顶部