我的个人网络私密空间

HTML、CSS、JavaScript网站建设基础知识综合应用:“分享到”效果制作

大家上网时一般都有发现,某些网站的左侧、右侧或文章末尾会有一个“分享到”小按钮,当鼠标移上去或点击时,它隐藏的部份就会显示出来。下面我就展示出源代码给大家参考一下:

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

以上网页代码的大概作用是,在网站或网页的左下角,创建一个分享链接集合,并把它绿色区域隐藏起来,当鼠标移动到“分享到”这按钮时,绿色区域就向右尝显示出来。在浏览器中运行时,具体的效果如下图所示:

网页分享效果
网页分享效果
看完该文章有什么感受?
转载请注明来源:雨飞叶 » HTML、CSS、JavaScript网站建设基础知识综合应用:“分享到”效果制作

评论 抢沙发

理智防人:耳听可能假,眼见未必实。安全拒绝:我要想清楚,明天答复你。

网站建设与资源变现上网学习找资源教程