前端-分享侧面弹出栏

最新推荐文章于 2023-06-14 15:03:32 发布

李任贤

最新推荐文章于 2023-06-14 15:03:32 发布

阅读量850

点赞数 1

分类专栏：原创文章标签：原创前端 js 特效分享栏

本文链接：https://blog.csdn.net/LiRenxian0316/article/details/79367992

版权

原创专栏收录该内容

12 篇文章 0 订阅

订阅专栏

分享侧面弹出栏

个人原创，转载请注明出处

重发的博客

下面是最近写的一个小特效，很适合前端初学者练手，本从也是菜鸟一个。代码中如有不足之处还请大神们指正，谢谢。

/*******************************HTML代码**********************************/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>侧边弹出分享栏</title>
<link rel = "stylesheet" type = "text/css" href = "分享到3.css" />
</head>

<body>
<div id = "div">
    <li><a href = "#">Q  Q空间</a></li>
    <li><a href = "#">朋友 圈</a></li>
    <li><a href = "#">新浪微博</a></li>
    <li><a href = "#">腾迅微博</a></li>
    <li><a href = "#">微信好友</a></li>
    <li><a href = "#">个人博客</a></li>
    <li><a href = "#">Q  Q好友</a></li>
    <li><a href = "#">知呼</a></li>
    <span>分享到</span>
</div>
<script language = "JavaScript" src="分享到3.js"></script>
</body>

/*************************************************CSS代码*************************************************/

body {margin: 0; padding: 0;}	/**清除默认值**/
#div {
	width: 150px;				/**宽**/
	height: 350px;				/**高**/
	background-color: #39F ;		/**背景色**/
	position: absolute;			/**绝对定位**/
	left: -150px;				/**定位到离窗口左边-150**/
	border-radius: 10px;		/**四个圆角都设置为10px**/
}
#div li {
	list-style-type: none;		/**把li前面的小黑点去掉**/
	font-size: 25px;			/**字体大小**/
	line-height: 43px;			/**行的上距离**/
	text-align: center;			/**li水平居中**/
}
#div li a {
	text-decoration: none;		/**去除a元素的下划线**/
}
a:hover{
	color: #F00; 				/**鼠标悬浮样式**/
}
a:active
{
	color: #FF0;				/**鼠标点击样式**/
}
#div span {
	width: 35px;					/**宽**/
	height: 90px;					/**高**/
	background-color: #CCC;			/**背景色**/
	position: absolute;				/**绝对定位(相对于你元素div)**/
	left: 150px;					/**定位到离父元素左边的150px**/
	top: 130px;						/**定位到离父元素上边的130px**/
	font-size: 25px;				/**字体大小**/
	border-radius: 0 10px 10px 0;	/**只设置右下两个圆角**/
	line-height: 30px;				/**行的上中离**/
	text-align: center;				/**字体水平居中**/
}

/*********************************javascript代码*************************************************/

//这个变量用于存放定时器
var timer = null;
//弹出函数
function movement (destination)
{
	//div弹出速度
	var speed = 0;
	//获取div元素
	var oDiv = document.getElementById('div');
	//如果div的左边距离小于目标地,则div向右弹出，速度为正
	if (oDiv.offsetLeft < destination)
	{
		speed = 10;
	}
	//如果div的左边距离大于目标地，则div向左收，速度为负
	if (oDiv.offsetLeft > destination)
	{
		speed = -10;
	}
	//防止同时开启多个定时器产生的问题。在开启下一个定时器前把现在这个定时器关闭
	clearInterval(timer);
	//把定时器放到变量timer里
	timer = setInterval(function (){
		if (oDiv.offsetLeft == destination)
		{	//如果div现在的左边距离已经等于目标地就关闭定时器。完全弹出就关闭定时器
			clearInterval(timer);
		} 
		else
		{	//否则就是未到目标地。即未完全弹出
			oDiv.style.left = oDiv.offsetLeft + speed + 'px';
		}
		//间隔30毫秒就前进一个speed距离	
	}, 30);
};
/***************************************************************/
//获取div元素
var oDiv = document.getElementById('div');
//为div元素添加鼠标移入事件
oDiv.onmousemove = function ()
{
	movement(0);	
};
//为div元素添加鼠标移出事件
oDiv.onmouseout = function ()
{
	movement(-150);
};