网页常用侧边栏悬浮客服小工具代码

随着网页滚动始终固定在侧边的客服小工具，用于显示在线咨询、联系电话、微信公众号、返回顶部等信息。HTML+CSS结合jQuery代码，可以实现鼠标悬浮或点击显示电话号码、二维码图片等。

代码效果：

HTML代码：

<div id="widget">
    <ul>
        <li>
            <a class="pc" href="tencent://message/?Menu=yes&uin=10000&Site=https://www.tddx.net/">
                <p class="icon">
                    <img src="../images/widget_01.svg" alt="QQ"/>
                    <img src="../images/widget_01_on.svg" alt="QQ"/>
                </p>
                <p class="name">QQ</p>
            </a>
        </li>
        <li>
            <a href="tel:13787878787">
                <p class="icon">
                    <img src="../images/widget_02.svg" alt="电话"/>
                    <img src="../images/widget_02_on.svg" alt="电话"/>
                </p>
                <p class="name">电话</p>
            </a>
            <div class="drop">
                <div class="tel">13787878787</div>
            </div>
        </li>   
        <li>
            <a href="javascript:void(0);">
                <p class="icon">
                    <img src="../images/widget_03.svg" alt="微信"/>
                    <img src="../images/widget_03_on.svg" alt="微信"/>
                </p>
                <p class="name">微信</p>
            </a>
            <div class="drop">
                <div class="qr">
                    <img src="../images/qrcode.jpg" alt="微信"/>
                </div>
            </div>
        </li>
    </ul>
</div>

PS：代码中涉及的图标图片自动准备。

CSS代码：

#widget{font-size:100px;position:fixed;right:0;top:50%;transform:translateY(-50%);background-color:#fff;box-shadow:0px 0px 0.3em 0px 
rgba(0,0,0,0.1);border-radius:0.15em 0px 0px 0.15em;width:0.7em;z-index:9;}
#widget li{list-style:none;position:relative;}
#widget .wap{display:none;}
#widget .icon{width:0.4em;height:0.4em;border-radius:0.1em;overflow:hidden;position:relative;margin:0 auto 0.05em;}
#widget .icon img{display:block;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;transition:all 0.2s;}
#widget .icon img:nth-child(2){opacity:0;}
#widget .name{text-align:center;color:#000;font-size:0.14em;line-height:1.5em;font-weight:lighter;margin:0;}
#widget a{display:block;overflow:hidden;padding:0.14em 0;position:relative;}
#widget a:after{width:0.5em;height:1px;background-color:rgba(0,0,0,0.06);display:block;content:'';position:absolute;left:0.1em;bottom:0;}
#widget a:hover .icon{background-color:#ffb400;}
#widget a:hover .icon img:nth-child(1){opacity:0;}
#widget a:hover .icon img:nth-child(2){opacity:1;}
#widget .drop{position:absolute;right:100%;top:50%;transform:translateY(-50%);box-shadow:0px 0px 0.3rem 0px rgba(0,0,0,0.1);border-radius:0.1em;background-color:#fff;margin-right:0.15em;display:none;}
#widget .drop:after{display:block;content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);border-left:0.1em solid #fff;border-top:0.1em solid transparent;border-bottom:0.1em solid transparent;}
#widget .tel{color:#000;font-weight:lighter;white-space:nowrap;font-size:0.3em;padding:0.5em 1em;}
#widget .qr{padding:0.05em;width:1.5em;}
#widget .qr img{display:block;width:100%;height:auto;}

jQuery代码：

$(function(){
    var widget = $('#widget li');
    $(window).resize(function(){
        if($(this).width() > 1024){
            widget.on('mouseenter mouseleave').off('click');
            widget.mouseenter(function(){
                if($(this).children('.drop').length > 0){
                    $(this).children('.drop').stop().fadeIn('fast').parents('li').siblings('li').children('.drop').hide();
                }
            }).mouseleave(function(){
                $(this).children('.drop').hide();
            });
        }else{
            widget.off('mouseenter mouseleave');
            widget.off('click').click(function(){
                if($(this).find('.qr').length > 0){
                    $(this).children('.drop').stop().fadeToggle('fast').parents('li').siblings('li').children('.drop').hide();
                }
            });
        }
    }).trigger('resize');
});

窗口大于1024像素时，鼠标悬浮显示；小于或等于1024像素时，点击显示。