右側滑動出現導航條

時間 2019-11-17
標籤右側滑動出現導航简体版
原文原文鏈接
<!DOCTYPE html>
javascript
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--jquery-->
    <script type="text/javascript" language="javascript" src="http://gz.jgyljt.com/jgswt/js/jquery.js"></script>
    <script>
        $(function() {
            // 懸浮窗口
            $(".yb_conct").hover(function() {
                $(".yb_conct").css("right", "5px");
                $(".yb_bar .yb_ercode").css('height', '200px');
            }, function() {
                $(".yb_conct").css("right", "-127px");
                $(".yb_bar .yb_ercode").css('height', '53px');
            });
            // 返回頂部
            $(".yb_top").click(function() {
                $("html,body").animate({
                    'scrollTop': '0px'
                }, 300)
            });
        });
    </script>
    <style>
        /*固定的懸浮窗*/
        .yb_conct{position:fixed;z-index:9999999;top:200px;right:-127px;cursor:pointer;transition:all .3s ease;}
        .yb_bar ul li{width:180px;height:53px;font:16px/53px 'Microsoft YaHei';color:#fff;text-indent:54px;margin-bottom:3px;border-radius:3px;transition:all .5s ease;overflow:hidden;}
        .yb_bar .yb_top{background:#333333 url(http://gz.jgyljt.com/jgswt/img/bdjgAddon/yhPc_right.png) no-repeat 0 0;}
        .yb_bar .yb_phone{background:#00ccff url(http://gz.jgyljt.com/jgswt/img/bdjgAddon/yhPc_right.png) no-repeat 0 -57px;}
        .yb_bar .yb_sq{text-indent:0;background:#ff6600 url(http://gz.jgyljt.com/jgswt/img/bdjgAddon/yhPc_right.png) no-repeat 0 -113px;}
        .yb_bar .yb_qq{text-indent:0;background:#ff0033 url(http://gz.jgyljt.com/jgswt/img/bdjgAddon/yhPc_right.png) no-repeat 0 -170px;}
        .yb_bar .yb_weibo{text-indent:0;background:#ffcc00 url(http://gz.jgyljt.com/jgswt/img/bdjgAddon/yhPc_right.png) no-repeat 0 -226px;}
        .yb_bar .yb_ercode{background:#66cc33 url(http://gz.jgyljt.com/jgswt/img/bdjgAddon/yhPc_right.png) no-repeat 0 -283px;}
        .hd_qr{padding:0 29px 25px 29px;}
        .yb_weibo a{display:block;text-indent:54px;width:100%;height:100%;color:#ffffff;}
        .yb_sq a{display:block;text-indent:54px;width:100%;height:100%;color:#ffffff;}
        .yb_qq a{display:block;text-indent:54px;width:100%;height:100%;color:#ffffff;}
    </style>
    <!--右側客服-->
</head>

<body>

    <!--右側客服-->
    <div class="yb_conct">
        <div class="yb_bar">
            <ul>
                <li class="yb_top" style="color:#ffffff;">返回頂部</li>
                <li class="yb_phone" style="color:#ffffff;">0797-8399022</li>
                <li class="yb_sq">
                    <a target="_blank" href="http://p.qiao.baidu.com/cps/chat?siteId=11942880&userId=25443022" title="在線諮詢">在線諮詢</a>
                </li>
                <li class="yb_qq">
                    <a target="_blank" href="tencent://message/?uin=1239886577&Site=163164.cn&Menu=yes" title="在線諮詢">QQ&nbsp;諮詢</a>
                </li>
                <li class="yb_weibo">
                    <a target="_blank" href="https://weibo.com/u/5607907845" title="在線諮詢">新浪微博</a>
                </li>
                <li class="yb_ercode">微信客服<br><img class="hd_qr" src="http://gz.jgyljt.com/jgswt/img/bdjgAddon/yhPc_ewm.jpg" style="width:120px; height:120px;"></li>
            </ul>
        </div>
    </div>
    <!--右側客服-->
</body>

</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。