今天给大家分享一款基于jquery的侧边栏分享导航。这款分享钮一直固定于左侧，鼠标经过的时候凸出显示，这款分享按钮适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。
在线预览源码下载
实现的代码。
html代码：
<div class="zzsc"><a href="http://***/" class="lanren1"><img src="images/zzsc01.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://***/"class="lanren2"><img src="images/zzsc02.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://***/"class="lanren3"><img src="images/zzsc03.jpg" alt="爱编程" width="50" height="50" /></a><a href="http://***/" class="lanren4"><img src="images/zzsc04.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://***/"class="lanren5"><img src="images/zzsc05.jpg" alt="爱编程" width="50" height="50" /></a></div>
css3代码：
*{margin: 0;padding: 0;list-style: none;}img{border: 0;}body{background: #ccc;}.zzsc{width: 50px;height: 250px;position: fixed;left: 0;top: 50%;margin-top: -125px;z-index: 900;}.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);});});
via：http://***/Article/6
