基于jquery的侧边栏分享导航

本篇文章主要介绍了"基于jquery的侧边栏分享导航"，主要涉及到方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 今天给大家分享一款基于jquery的侧边栏分享导航。这款分享钮一直固定于左侧，鼠标经过的时候凸出显示，这款分享按钮适用浏览器：IE8、360、FireFox、C...

今天给大家分享一款基于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的侧边栏分享导航，包括了方面的内容，希望对Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。

本文网址链接：http://www.codes51.com/article/detail_110877.html