在网页右侧漂浮的QQ在线客服代码,QQ在线状态代码(四种样式)

在网页右侧漂浮,很实用的一款QQ在线客服代码,点击QQ图标,可直接与客服对话。

在网页右侧漂浮的QQ在线客服代码,QQ在线状态代码(四种样式)

本文分享的是一款漂浮在网页右侧的QQ在线客服代码:在网站上添加qq在线状态,方便用户直接点击qq进行在线咨询。

在网页<head>头部引入以下文件:

<link rel="stylesheet" type="text/css" href="style/default_blue.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script language="javascript" src="js/jquery.Sonline.js"></script>

想换个颜色样式,只需引入不同的CSS样式:

在网页右侧漂浮的QQ在线客服代码,QQ在线状态代码(四种样式)

如把QQ在线客服换成红色样式:

<link rel="stylesheet" type="text/css" href="style/red.css"/>

JS代码:

<script type="text/javascript">
$(function(){
  $("body").Sonline({
    Position:"right",//left或right
    Top:200,//顶部距离,默认200px
    Effect:true, //滚动或者固定两种方式,布尔值:true或false
    DefaultsOpen:true, //默认展开:true,默认收缩:false
    Qqlist:"888888|客服01,888888|客服02,888888|客服03,888888|客服04,888888|客服05" //多个QQ用','隔开,QQ和客服名用'|'隔开
  });
})	
</script>

<body>区域代码:

<div style="height:2500px"></div>
<div style="text-align:center;clear:both">
源码下载

本文转载自吾爱编程,原文链接: ,本文观点不代表125jz立场。

(1)
江山如画的头像江山如画管理团队
上一篇 2018年2月14日 上午10:40
下一篇 2018年2月17日 上午11:03

99%的人还看了以下文章

  • 3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

    表格隔行显示不同背景颜色,表格奇数行和偶数行交替显示不同的背景颜色。 一、纯CSS3实现表格隔行变色 关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…

    2018年9月5日
    4.1K0
  • 精美的滑出式水平导航特效

    一个精美的滑出式水平导航特效,打开页面只能看到文本链接,用户将鼠标悬停于标签上时,该导航菜单项目会滑出。 预览     下载源码 1、HTML结构 导航实现仅用一个简单的无序列表 <ul id=”navigation”> <li class=”home”><a href=””><span>Home</sp…

    2018年2月6日
    2.1K0
  • 中国省、市区二级联动下拉选择框-JS源码

    中国省、市区二级联动下拉选择框,包含所有省份及市县信息。 当选择省份下拉选择框时,市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”,市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里(js/common.js),中国网页设计在js文件里定义了两个数组,分别存放省份和对应的市区。 //省份 var pr…

    2019年6月5日
    3.9K0
  • 在网页中间弹窗代码-网页遮罩效果

    在网页中间弹出窗口,使整个网页变半透明。 关闭  125网页设计-权威的网页制作,网页设计教程基地:包含html、css、Javascript等教程及网页制作素材,网页设计欣赏,免费空间,网站推广等资源 点击,在网页中间弹出窗口

    2019年1月5日
    3.4K0
  • 网页右侧可隐藏的浮动QQ在线客服源码下载

    在线客服是企业网站必不可少的在线交流渠道,本站分享的在网页右侧可隐藏的浮动QQ在线客服使用jquery编写,固定在网站右侧不随滚动条滚动,点击展开,再次点击收缩,蓝色风格,调用方便。 网页右侧可隐藏的浮动QQ在线客服效果 HTML代码: <div id=floatTools class=jz125> <div class=floatL&gt…

    2018年8月2日
    1.7K0
  • 立体动画按钮、切换开关

    实例名称:立体动画按钮、切换开关在线预览:https://codepen.io/chrisgannon/pen/ZaPmKp HTML代码: <div id=”app”></div> CSS代码: body { background-color:#FFFCF9; overflow: hidden; text-align:center;…

    2019年10月17日
    1.6K0

发表回复

登录后才能评论