分享侧面弹出栏
个人原创,转载请注明出处
重发的博客
下面是最近写的一个小特效,很适合前端初学者练手,本从也是菜鸟一个。代码中如有不足之处还请大神们指正,谢谢。
/*******************************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);
};