蓝色展开收缩悬浮QQ客服代码

放在我的博客首页上的的预览图：

 在文章区的预览图如下：

 

 

 代码如下：

<div class="scrollsidebar" id="scrollsidebar">
  <div class="side_content">
    <div class="side_list">
      <div class="side_title"><a title="隐藏" class="close_btn"><span>关闭</span></a></div>
      <div class="side_center">
        <div class="custom_service">
          <p> <a title="点击这里给我发消息" href="tencent://message/?uin=2669803073&Site=https://www.cnblogs.com/qrk666/&Menu=yes" target="_blank"><img src="http://wpa.qq.com/pa?p=2:8983659:41"></a> </p>
        </div>
        <div class="other">
          <p><img src="https://images.cnblogs.com/cnblogs_com/qrk666/1750660/o_200504090346AD4BE6AC10146679D7FC4C3718A63A37.jpg" width="120"/></p>
          <p>QQ</p>
          <p>2669803073</p>
        </div>
        <div class="msgserver">
          <p><a href="tencent://message/?uin=2669803073&Site=https://www.cnblogs.com/qrk666/&Menu=yes" >联系</a></p>
        </div>
      </div>
      <div class="side_bottom"></div>
    </div>
  </div>
  <div class="show_btn"><span>在线客服</span></div>
</div>

<script type="text/javascript">!(function() {
    var serviceOnline = (function() {
        var sideContent = document.querySelector(".side_content");
        var show_btn = document.querySelector(".show_btn");
        var close_btn = document.querySelector(".close_btn");
        var timer = null;

        //悬浮QQ匀速移动
        var startMove = function(argument) {
            var scrollsidebar = document.getElementById("scrollsidebar");
            clearInterval(timer);
            timer = setInterval(function() {
                var speed = (argument - scrollsidebar.offsetTop) / 4;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (argument == scrollsidebar.offsetTop) {
                    clearInterval(timer);
                } else {
                    scrollsidebar.style.top = scrollsidebar.offsetTop + speed + "px";
                }
            }, 20);
        };

        //鼠标移动
        var scrollMove = function() {
            window.onscroll = window.onload = function() {
                var scrollsidebar = document.getElementById("scrollsidebar");
                var scrolltop =
                    document.body.scrollTop || document.documentElement.scrollTop;
                startMove(
                    parseInt(
                        (document.documentElement.clientHeight -
                            scrollsidebar.offsetHeight) /2 +scrolltop
                    )
                );
            };
        };

        //悬浮QQ显示
        var slideShow = function() {
            if (!show_btn) return false;
            show_btn.addEventListener(
                "click",
                function() {
                    show_btn.style.width = 0;
                    sideContent.style.width = "154px";
                },
                false
            );
        };

        //悬浮QQ隐藏
        var slideClose = function() {
            if (!close_btn) return false;
            close_btn.addEventListener(
                "click",
                function() {
                    console.log(this);
                    sideContent.style.width = 0;
                    show_btn.style.width = "25px";
                },
                false
            );
        };

        //返回出来的方法
        return {
            init: function() {
                scrollMove();
                slideClose();
                slideShow();
            }
        };
    })();

    //初始化
    serviceOnline.init();
})();</script>

　　

/*下面是加QQ弹框c's's*/
html {overflow-x:hidden;}

.custom_service p img {display: inline; vertical-align:middle;}
.scrollsidebar{position:absolute; z-index:999; top:350px;right:0}
.side_content{width:154px; height:auto; overflow:hidden; float:left; }
.side_content .side_list {width:154px;overflow:hidden;}
.show_btn{ width:0; height:112px; overflow:hidden; margin-top:50px; float:left; cursor:pointer;}
.show_btn span { display:none;}
.close_btn{width:24px;height:24px;cursor:pointer;}
.side_title,.side_bottom,.close_btn,.show_btn {background:url(../images/sidebar_bg.png) no-repeat;}
.side_title {height:46px;}
.side_bottom { height:8px;}
.side_center {font-family:Verdana, Geneva, sans-serif; padding:5px 12px; font-size:12px;}
.close_btn { float:right; display:block; width:21px; height:16px; margin:16px 10px 0 0; _margin:16px 5px 0 0;}
.close_btn span { display:none;}
.side_center .custom_service p { text-align:center; padding:6px 0; margin:0; vertical-align:middle;}
.other  { text-align:center;border-bottom:1px solid #ddd;border-top:1px solid #ddd}
.other p { padding:5px 0; _height:16px; margin:0;color: #666666;}
.msgserver { text-align:center; margin-bottom:5px;}
.msgserver a { background:url(../images/sidebar_bg.png) no-repeat -119px -115px; padding-left:22px;}

/* blue skin as the default skin */
.side_title, .side_blue .side_title {background-position:-195px 0;}
.side_center, .side_blue .side_center {background:url(../images/blue_line.png) repeat-y center;}
.side_bottom, .side_blue .side_bottom {background-position:-195px -50px;}
.close_btn, .side_blue .close_btn {background-position:-44px 0;}
.close_btn:hover, .side_blue .close_btn:hover {background-position:-66px 0;}
.show_btn , .side_blue .show_btn {background-position:-119px 0;}
.msgserver a, .side_blue .msgserver a {color:#06C;}

/* green skin  */
.side_green .side_title {background-position:-349px 0;}
.side_green .side_center {background:url(../images/green_line.png) repeat-y center;}
.side_green .side_bottom {background-position:-349px -50px;}
.side_green .close_btn {background-position:-44px -23px;}
.side_green .close_btn:hover {background-position:-66px -23px;}
.side_green .show_btn {background-position:-147px 0;}
.side_green .msgserver a {color:#76a20c;}

注：可以直接使用，两段代码都要用上

来源：oschina

链接：https://my.oschina.net/u/4302015/blog/4267092