今天給大家分享一款基于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/20126

總結

以上是生活随笔為你收集整理的基于jquery的侧边栏分享导航的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。