今天给大家分享一款基于jquery的侧边栏分享导航。这款分享钮一直固定于左侧，鼠标经过的时候凸出显示，这款分享按钮适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。
实现的代码。
html代码：
<div class="zzsc">
<a href="http://www.w2bc.com/" class="lanren1">
<img src="data:images/zzsc01.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://www.w2bc.com/"
class="lanren2">
<img src="data:images/zzsc02.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://www.w2bc.com/"
class="lanren3">
<img src="data:images/zzsc03.jpg" alt="爱编程" width="50" height="50" /></a>
<a href="http://www.w2bc.com/" class="lanren4">
<img src="data:images/zzsc04.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://www.w2bc.com/"
class="lanren5">
<img src="data:images/zzsc05.jpg" alt="爱编程" width="50" height="50" /></a>
</div>
css3代码：
*
{
margin:;
padding:;
list-style: none;
}
img
{
border:;
}
body
{
background: #ccc;
} .zzsc
{
width: 50px;
height: 250px;
position: fixed;
left:;
top: 50%;
margin-top: -125px;
z-index:;
}
.zzsc a
{
width: 50px;
height: 50px;
line-height: 50px;
float: left;
display: block;
text-align: right;
}
.zzsc .lanren1
{
background: #305790;
}
.zzsc .lanren2
{
background: #2BA9D2;
}
.zzsc .lanren3
{
background: #CF4C3A;
}
.zzsc .lanren4
{
background: #4698CA;
}
.zzsc .lanren5
{
background: #F9694E;
}
js代码：
$(function () {
$('.zzsc a').hover(function () {
$(this).animate({ width: '65px' }, 300);
}, function () {
$(this).animate({ width: '50px' }, 300);
});
});