百度分享代码实例.gif
实现思路：
- 使用绝对定位改变盒子位置
- 使用animate 改变定位盒子的的 left
- HTML和CSS搭建页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度分享效果</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 250px;
height: 326px;
position: absolute;
left: -226px;
top: 100px;
}
.box .right {
background: url(images/分享.gif);
position: absolute;
height: 88px;
width: 24px;
right: 0;
top: 120px;
}
.box .left {
position: absolute;
width: 226px;
}
.box .left .topbox {
line-height: 24px;
color: #626262;
padding: 5px;
text-align: left;
font-size: 14px;
background-color: #f6f6f6;
border: 1px solid #e9e9e9;
}
.box .left .centerbox {
padding: 5px 0 5px 7px;
height: 277px;
}
.box .left .centerbox ul{
list-style: none;
padding-right: 3px;
}
.box .left .centerbox ul li {
float: left;
font-size: 12px;
line-height: 18px;
height: 18px;
width: 72px;
border:1px solid #fff;
margin-right: 6px;
padding: 5px 0 5px 28px;
background: url(images/icons.png) no-repeat 6px -2437px;
}
.box .left .centerbox ul li.first {
background: url(images/icons.png) no-repeat 6px -2437px ;
}
.box .left .centerbox ul li.two {
background: url(images/icons.png) no-repeat 6px -46px ;
}
.box .left .centerbox ul li.three {
background: url(images/icons.png) no-repeat 6px -98px ;
}
.box .left .centerbox ul li.four {
background: url(images/icons.png) no-repeat 6px -149px ;
}
.box .left .centerbox ul li.five {
background: url(images/icons.png) no-repeat 6px -200px ;
}
.box .left .centerbox ul li.six {
background: url(images/icons.png) no-repeat 6px -253px ;
}
.box .left .centerbox ul li.seven {
background: url(images/icons.png) no-repeat 6px -306px ;
}
.box .left .centerbox ul li.eight {
background: url(images/icons.png) no-repeat 6px -358px ;
}
.box .left .centerbox ul li.nine {
background: url(images/icons.png) no-repeat 6px -410px ;
}
.box .left .centerbox ul li.ten {
background: url(images/icons.png) no-repeat 6px -462px ;
}
.box .left .centerbox ul li.eveven {
background: url(images/icons.png) no-repeat 6px -514px ;
}
.box .left .centerbox ul li a {
text-decoration: none;
color: #565656;
}
.box .left .bottombox {
position: absolute;
bottom: 0;
width: 216px;
line-height: 26px;
color: #626262;
padding: 5px;
text-align: right;
font-size: 12px;
padding-right: 10px;
background-color: #f6f6f6;
border: 1px solid #e9e9e9;
}
.box .left .bottombox a {
background: url(images/icons.png) no-repeat;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="right"></div>
<div class="left">
<div class="topbox">分享到</div>
<div class="centerbox">
<ul>
<li class = 'first'><a href="">一键分享</a></li>
<li class = 'two'><a href="">QQ空间</a></li>
<li class = 'three'><a href="">新浪微博</a></li>
<li class = 'four'><a href="">百度云收藏</a></li>
<li class = 'five'><a href="">微信</a></li>
<li class = 'six'><a href="">人人网</a></li>
<li class = 'seven'><a href="">腾讯微博</a></li>
<li class = 'eight'><a href="">百度相册</a></li>
<li class = 'nine'><a href="">开心网</a></li>
<li class = 'ten'><a href="">疼腾朋友</a></li>
<li class = 'eleven'><a href="">百度贴吧</a></li>
<li class = 'twelve'><a href="">豆瓣网</a></li>
<li class = 'thirteen'><a href="">百度新首页</a></li>
<li class = 'fifteen'><a href="">QQ好友</a></li>
<li class = 'sixteen'><a href="">和讯微博</a></li>
<li class = 'seventeen'><a href="">百度中心</a></li>
</ul>
</div>
<div class="bottombox"><a herf = '#'>更多...</a></div>
</div>
</div>
<script src = "js/jquery-1.12.3.min.js"></script>
<script>
$(".box").mouseenter(function(){
$(".box").stop(true).animate({"left" : 0},400);
});
$(".box").mouseleave(function(){
$(".box").stop(true).animate({"left" : -226},400);
});
</script>
</body>
</html>
网友评论