基于jquery的侧边栏分享导航

最新推荐文章于 2024-07-06 18:15:00 发布

转载最新推荐文章于 2024-07-06 18:15:00 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liaohuolin/p/4269785.html

文章标签：

#javascript #ViewUI

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

转载于:https://www.cnblogs.com/liaohuolin/p/4269785.html