今天给大家分享一款基于jquery的侧边栏分享导航。这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。
实现的代码。
html代码:
<div class="zzsc"> <a href="http://www.w2bc.com/" class="lanren1"> <img src="images/zzsc01.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://www.w2bc.com/" class="lanren2"> <img src="images/zzsc02.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://www.w2bc.com/" class="lanren3"> <img src="images/zzsc03.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://www.w2bc.com/" class="lanren4"> <img src="images/zzsc04.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://www.w2bc.com/" 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://www.w2bc.com/Article/20126
时间: 2024-10-10 07:21:15