使用方法：
1、将style里的css样式复制到你的样式表中
2、将body中的代码部分拷贝到你需要的地方即可
(js、图片采用绝对路径，不建议修改)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>懒人原创淡绿色支持微信页面右侧悬浮在线客服代码</title>

<style>

*{ margin:0; padding:0; list-style:none;}

img{ border:0;}

.lanren{ position:absolute; right:0; top:150px;}

.lanren .slide_min{ width:28px; height:112px; background:url(http://demo.lanrenzhijia.com/2014/service1205/images/slide_min.jpg) no-repeat; cursor:pointer;}

.lanren .slide_box{ width:154px; height:auto; overflow:hidden; background:url(http://demo.lanrenzhijia.com/2014/service1205/images/slide_box_bg.jpg) repeat-y; font-size:12px; text-align:center; line-height:130%; color:#666; border-bottom:2px solid #76A20D;}

.lanren .slide_box .weixin{ margin-bottom:5px;}

.lanren .slide_box img{ cursor:pointer;}

.lanren .slide_box p{ text-align:center; padding:5px; margin:5px;border-bottom:1px solid #ddd;}

.lanren .slide_box span{ padding:5px 10px; display:block;}

.lanren .slide_box span a{ color:#76A20C;}

</style>

</head>

<body style="height:3000px;">

<!-- 代码部分begin -->

<div class="lanren">

    <div class="slide_min"></div>

    <div class="slide_box" style="display:none;">

        <h2><img src="http://demo.lanrenzhijia.com/2014/service1205/images/slide_box.jpg" /></h2>

        <p><a title="点击这里给我发消息" href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456789&amp;site=www.cactussoft.cn&amp;menu=yes" target="_blank"><img src="http://wpa.qq.com/pa?p=2:123456789:41"></a></p>

        <p>

            <img src="http://demo.lanrenzhijia.com/2014/service1205/images/weixin.jpg" class="weixin" /><br />

            <b>客户服务热线</b><br />

            130-0000-0000

        </p>

        <span><a href="#">给我们留言</a></span>

    </div>

</div>

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>

<script>

$(function(){

    var thisBox = $('.lanren');

    var defaultTop = thisBox.offset().top;

    var slide_min = $('.lanren .slide_min');

    var slide_box = $('.lanren .slide_box');

    var closed = $('.lanren .slide_box h2 img');

    slide_min.on('click',function(){$(this).hide();    slide_box.show();});

    closed.on('click',function(){slide_box.hide().hide();slide_min.show();});

    // 页面滚动的同时，悬浮框也跟着滚动

    $(window).on('scroll',function(){scro();});

    $(window).onload = scro();

    function scro(){

        var offsetTop = defaultTop + $(window).scrollTop()+'px';

        thisBox.animate({top:offsetTop},

        {    duration: 600,    //滑动速度

             queue: false    //此动画将不进入动画队列

         });

    }

});

</script>

<!-- 代码部分end -->

</body>

</html>

支持微信页面右侧悬浮QQ在线客服的更多相关文章

  1. QQ在线客服JS代码，自适应漂浮在网页右侧

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  2. QQ在线客服设置

    QQ在线客服设置 1.客户在添加QQ在线客服后,需要让用户在线不需要添加为好友就能在线对话,一般默认设置下会显示"您需要添加对方为好友+才能给对方发送会话消息",具体解决方法如下: ...

  3. QQ在线客服，默认到要加好友，授权也不起作用需要先开通QQ营销服务

    QQ在线客服,默认到要加好友,授权也不起作用需要先开通QQ营销服务http://wpa.qq.com/msgrd?v=3&uin=你的客服QQ号码&site=qq&menu=y ...

  4. pc、移动端H5网站 QQ在线客服、群链接代码【我和qq客服的那些事儿】

    转载:http://blog.csdn.net/fungleo/article/details/51835368#comments 移动端H5 QQ在线客服链接代码 <a href=" ...

  5. pc端_移动端_H5_ QQ在线客服链接代码

    PC端:QQ在线客服链接代码 <a href="tencent://message/?uin=1239300678&Site=sc.chinaz.com&Menu=ye ...

  6. QQ在线客服

    css代码: .float0831 { POSITION: fixed; TOP: 180px; RIGHT: 1px; _position: absolute } .float0831 A { CO ...

  7. QQ在线客服的使用

    <a target="_blank" href="http://wpa.qq.com/msgrd?v=1&uin=2804010556&site=a ...

  8. 网页中添加QQ在线客服

    方法一:调用本地已安装的QQ进行会话 <a href='tencent://message/?uin=QQ号码&Site=网站地址&Menu=yes'></a> ...

  9. 网站加入QQ在线客服

    <!-- qq客服 --> <div class="QQFloat" > <div class="qq"> <div ...

随机推荐

  1. 揭秘重度MMORPG手游后台性能优化方案

    本文节选自<2018腾讯移动游戏技术评审标准与实践案例>手册,由腾讯互娱工程师王杰分享<仙剑奇侠传online>项目中游戏后台的优化经验,深度解析寻路算法.视野管理.内存优化. ...

  2. Android之控件学习

    文本域,类似于HTML里的textarea <EditText android:id="@+id/edit_text" android:layout_width=" ...

  3. J2SE的基本简介与J2EE/J2ME的差异

    J2SE简介与J2EE.J2ME的比较 Java2平台包括:标准版(J2SE).企业版(J2EE)和微缩版(J2ME)三个版本. J2SE,J2ME和J2EE,这也就是SunONE(Open NetE ...

  4. Spring Boot2(九)：整合Jpa的基本使用

    一.前言 今天早上看到一篇微信文章,说的是国内普遍用的Mybatis,而国外确普遍用的是Jpa.我之前也看了jpa,发现入门相当容易.jpa对于简单的CRUD支持非常好,开发效率也会比Mybatis高 ...

  5. ES集群监控 之 Cerebro 0.8.3 安装及简单使用

    注意权限,不建议使用root,同es集群的启动用户相同即可 1. 下载 & 解压 # 下载 wget https://github.com/lmenezes/cerebro/releases/ ...

  6. 前端Web浏览器基于Flash如何实时播放监控视频画面（一）之获取监控摄像头的RTSP流

    本片文章只是起到抛砖引玉的作用,能从头到尾走通就行,并不做深入研究.为了让文章通俗易懂,尽量使用白话描述. 0x001: 获取 现在市场上普见的摄像头都支持RTSP协议,如果你不懂什么是RTSP协议, ...

  7. html手机自适应屏幕

    <meta name="viewport" content="height=device-width, initial-scale=1.0, maximum-sca ...

  8. Navicat Premium Mac破解版安装方法

    第一步:这部分暂时存到文本编辑器中 公钥: -----BEGIN PUBLIC KEY-----MIIBITANBgkqhkiG9w0BAQEFAAOCAQ4AMIIBCQKCAQB8vXG0ImYh ...

  9. 数据结构-双向链表（Python实现）

    数据结构在编程世界中一直是非常重要的一环,不管是开发还是算法,哪怕是单纯为了面试,数据结构都是必修课,今天我们介绍链表中的一种--双向链表的代码实现. 好了,话不多说直接上代码. 双向链表 首先,我们 ...

  10. 【Aizu - 0525】Osenbei （dfs）

    -->Osenbei 直接写中文了 Descriptions: 给出n行m列的0.1矩阵,每次操作可以将任意一行或一列反转,即这一行或一列中0变为1,1变为0.问通过任意多次这样的变换,最多可以 ...