如何在网站右侧添加浮动的客服代码

最近无意中在云瑞网的服务页面看到了右侧悬浮的企鹅小图像，点击后可以直接通过“QQ 在线”功能与客服进行“QQ 在线”弹窗交流！博主大概看了下底层代码，发现很好实现，于是就尝试在自己的网站：https://blog.yephy.com/ 上面实现了。下面，就把实现的方法告诉大家：

首先，在你网站的body代码中（通常可以加入在foot.php文件中）加入如下代码：

<style>.animated{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.livechat-girl{width:60px;height:60px;border-radius:50%;position:fixed;top:80%;right:40px;opacity:0;-webkit-box-shadow:0 5px 10px 0 rgba(35,50,56,0.3);box-shadow:0 5px 10px 0 rgba(35,50,56,0.3);z-index:700;transform:translateY(0);-webkit-transform:translateY(0);-ms-transform:translateY(0);cursor:pointer;-webkit-transition:all 1s cubic-bezier(0.86,0,0.07,1);transition:all 1s cubic-bezier(0.86,0,0.07,1)}.livechat-girl:focus{outline:0}.livechat-girl.animated{opacity:1;transform:translateY(-40px);-webkit-transform:translateY(-40px);-ms-transform:translateY(-40px)}.livechat-girl:after{content:'';width:12px;height:12px;border-radius:50%;background-image:linear-gradient(to bottom,#38dc79,#1ab744);position:absolute;right:1px;top:1px;z-index:50}.livechat-girl .girl{position:absolute;top:0;left:0;width:100%;height:auto;z-index:50;border-radius:100%}.livechat-girl .animated-circles .circle{background:rgba(26,183,68,0.25);width:60px;height:60px;border-radius:50%;position:absolute;z-index:49;transform:scale(1);-webkit-transform:scale(1)}.livechat-girl .animated-circles.animated .c-1{animation:2000ms scaleToggleOne cubic-bezier(0.25,0.46,0.45,0.94) forwards}.livechat-girl .animated-circles.animated .c-2{animation:2500ms scaleToggleTwo cubic-bezier(0.25,0.46,0.45,0.94) forwards}.livechat-girl .animated-circles.animated .c-3{animation:3000ms scaleToggleThree cubic-bezier(0.25,0.46,0.45,0.94) forwards}.livechat-girl.animation-stopped .circle{opacity:0 !important}.livechat-girl .livechat-hint{position:absolute;right:40px;top:50%;margin-top:-20px;opacity:0;z-index:0;-webkit-transition:all 0.3s cubic-bezier(0.86,0,0.07,1);transition:all 0.3s cubic-bezier(0.86,0,0.07,1);background-color:#1ab744}.livechat-girl .livechat-hint.show_hint{-webkit-transform:translateX(-40px);transform:translateX(-40px);opacity:1}.livechat-girl .livechat-hint.hide_hint{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.rd-notice-tooltip{-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.2);box-shadow:0 2px 2px rgba(0,0,0,0.2);font-size:14px;border-radius:3px;line-height:1.25;position:absolute;z-index:65;max-width:350px}.rd-notice-tooltip.thumb-heart-tooltip{z-index:100;margin-top:19px}.rd-notice-tooltip.thumb-heart-tooltip .rd-notice-content{padding:10px 20px}.rd-notice-tooltip:after{position:absolute;display:block;content:'';height:20px;width:20px;-webkit-box-shadow:none;box-shadow:none;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;z-index:50;top:10px;right:-6px;background-color:#1ab744}.rd-notice-tooltip .rd-notice-content{background:0;border-radius:3px;width:100%;color:#fff;position:relative;z-index:60;padding:20px;font-weight:400;line-height:1.45}.rd-notice-tooltip .rd-notice-content a{color:#fff;text-decoration:underline}.rd-notice-tooltip .arrow{display:none !important}.rd-notice-tooltip.alert.rd-closing{white-space:normal;text-align:left}.rd-notice-tooltip.alert.rd-closing .rd-notice-content{padding-right:50px}.rd-notice-tooltip.single-line .rd-notice-content{height:40px;padding:0 20px;line-height:40px;white-space:nowrap}@keyframes scaleToggleOne{from{transform:scale(1);-webkit-transform:scale(1)}50%{transform:scale(2);-webkit-transform:scale(2)}100%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes scaleToggleTwo{0%{transform:scale(1);-webkit-transform:scale(1)}20%{transform:scale(1);-webkit-transform:scale(1)}60%{transform:scale(2);-webkit-transform:scale(2)}100%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes scaleToggleThree{0%{transform:scale(1);-webkit-transform:scale(1)}33%{transform:scale(1);-webkit-transform:scale(1)}66%{transform:scale(2);-webkit-transform:scale(2)}100%{transform:scale(1);-webkit-transform:scale(1)}}</style>
<a class="livechat-girl js-livechat-girl animated" id="lc-girl-block-en_2" href="http://wpa.qq.com/msgrd?v=3&uin=252112645&site=qq&menu=yes" target="_blank"><img class="girl" border="0" src="http://cdn.yephy.com/image/kfh.png" alt="点击这里给我发消息" title="点击这里给我发消息">
  <div class="js-livechat-hint livechat-hint rd-notice rd-notice-tooltip single-line hide_hint">
     <div class="popover-content rd-notice-content">嘿！有什么能帮到您的吗？</div>
     </div>
  <div class="animated-circles js-animated-circles animated">
    <div class="circle c-1"></div>
    <div class="circle c-2"></div>
    <div class="circle c-3"></div>
  </div>
</a>
<script type='text/javascript' src='http://cdn.yephy.com/js/jquery-3.2.1.min.js?ver=3.2.1'></script>
<script>
jQuery(function(){
        setInterval(function(){
            jQuery('.js-animated-circles').toggleClass('animated');
        },4000);

        jQuery('#lc-girl-block-en_2').on({'mouseover':function(){
            jQuery(this).find('.js-livechat-hint').removeClass('hide_hint').addClass('show_hint');
        },
            'mouseleave':function(){
                jQuery(this).find('.js-livechat-hint').removeClass('show_hint').addClass('hide_hint');
            }
        })
    });
</script>

上面的代码中，需要留意一些地方：

1、个人 QQ 号码的替换：

代码第二行中，将http://wpa.qq.com/msgrd?v=3&uin=252112645&site=qq&menu=yes这个链接中的252112645替换为你的 QQ 号码，同时你要到这里开通“QQ 在线”功能；

2、图片和 JS 文件保存及个人路径替换

代码第二行中的图片链接http://cdn.yephy.com/image/kfh.png这个是我自己 CDN 服务器的图片，因为做了防盗链设置，所以如果童鞋们直接复制代码的话，将会无法显示，因此大家可以直接将这个图片保存上传到自己的网站目录或者 CDN 服务器，然后将链接替换就可以了；

同理，代码第十二行中的 JS 文件地址，大家也可以用同样的办法将 JS 文件保存上传到自己的网站目录或者 CDN 服务器，然后替换对应的链接！

至此，我们的代码添加就完全结束了，将代码后，清理缓存并刷新页面，怎么样，看到可爱的小企鹅了么？

这时候，我们还要解决一个问题，就是想要这个代码，不出现在平版设备或者手机设备的页面上，要解决这个问题，只需要在代码中第一行 CSS 代码的部分，首尾分别加入“@media(min-width:880px) {”和“}”就可以了,加过之后的代码如下（这里只显示第一行代码）：（之前代码错误，导致在手机和平板上还会显示，只是样式发生了改变，并且出现在页面的底部，这里改正下）只需要在第一行代码的style标签后面加入下面一段代码即可：

@media(max-width:880px){.livechat-girl{display:none}}

重新保存后，到移动设备上，刷新一下我们的网页，是不是看不到小企鹅了？再也不用担心它会遮挡屏幕了！^_^