使用方法：
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. jquery 之load post get

    load() 方法从服务器加载数据,并把返回的数据放入被选元素中 load(url,data,fun(responseTxt ,responseTxt,xhr ){}) 必需的 URL 参数规定您希望 ...

  2. 作为服务注册中心，Eureka比Zookeeper好在哪里

    CAP是Consistency.Availablity和Partition Tolerance的缩写.一般的分布式系统最多满足其中两条.而Partition Tolerance是分布式系统的关键,因此 ...

  3. Nodejs操作MySQL - 增删改查

    先安装npm模块项目 npm init 安装mysql npm install mysql --save Nodejs 连接msyql // 导入mysql const mysql = require ...

  4. Ubuntu --- lamp环境下安装php扩展和开启apache重写

    安装教程参考:http://www.laozuo.org/8303.html 1.安装php扩展(比如安装mbstring) 先搜索相关的包 apt-cache search php7 再安装 apt ...

  5. 点菜网---Java开源生鲜电商平台-商品基础业务架构设计-商品分类(源码可下载)

    点菜网---Java开源生鲜电商平台-商品基础业务架构设计-商品分类 (源码可下载) 说明:我们搞过电商的人都可以体会到,搞生鲜电商是最复杂的,为什么复杂呢?我总结了有以下几个业务特性决定的: 1. ...

  6. Android使用Camera2获取预览数据

    一.Camera2简介 Camera2是Google在Android 5.0后推出的一个全新的相机API,Camera2和Camera没有继承关系,是完全重新设计的,且Camera2支持的功能也更加丰 ...

  7. DBA主宰一切请求，MySQL 查询重写

    这个功能一年左右之前就以知晓,应该是5.7的高版本中.今天难得有兴致测试.随之也就总结一下. 前言: 一般来说,我们都会让开发自己去改sql.这样需要重启应用,单节点不可避免有或多或少的停服时间.同事 ...

  8. python数据库-MySQL查询基本操作(50)

    一.条件查询 1.使用where子句对表中的数据筛选,结果为true的行会出现在结果集中 select * from 表名 where 条件; 2.比较运算符 等于= 大于> 大于等于>= ...

  9. iOS组件化开发一远端私有库建立（二）

    公共库业务,基础层划分! 一.构建私有云,本文推荐为码云 1.构建名称为LuckTimeSpec,选择私有建立: 2.Copy地址的https 链接: 二.打开终端 输入: cd /Users/zha ...

  10. redis 发布和订阅实现

    参考文献 15天玩转redis -- 第九篇 发布/订阅模式 <Redis设计与实现> 命令简介 在redis用户手册中,跟发布订阅相关的命令有如下的六个: PSUBSCRIBE PUBL ...