实现思路：
- 使用绝对定位改变盒子位置
- 使用animate 改变定位盒子的的 left
- HTML和CSS搭建页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156<!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;
}< 大专栏 百度分享按钮代码实例 2019-03-22br/> .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>