基于jquery的侧边栏分享导航

浏览数：45 / 时间：2015年06月09日

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

基于jquery的侧边栏分享导航