java 在线qq客服_jquery实现漂浮在网页右侧的qq在线客服插件
很实用的一款QQ在线客服代码,点击QQ图标,可直接与客服对话。具体实现代码如下:
html页面:
jquery实现qq客服
$(function(){
$("body").Sonline({
Position:"right",//left或right
Top:200,//顶部距离,默认200px
Effect:true, //滚动或者固定两种方式,布尔值:true或false
DefaultsOpen:true, //默认展开:true,默认收缩:false
Qqlist:"435027|客服01,435027|客服02,435027|客服03,435027|客服04,435027|客服05" //多个QQ用','隔开,QQ和客服名用'|'隔开
});
})
css样式:
/*默认蓝色*/
.SonlineBox{ width:162px; font-size:12px;overflow:hidden; z-index:9999;}
.SonlineBox .openTrigger{ width:30px; height:110px; position:absolute; top:0px; z-index:1; cursor:pointer; background:#0176ba url(../images/openTrigger.jpg) no-repeat;}
.SonlineBox .titleBox{ width:158px; height:35px; line-height:35px; background:#038bdc url(../images/SonlineTitleBg.gif) repeat-x; border-bottom:2px solid #0176ba;}
.SonlineBox .titleBox span{ margin-left:10px; color:#fff; font-size:14px; font-family:'微软雅黑','黑体';}
.SonlineBox .contentBox{ width:158px; height:auto; border:2px solid #0176ba; background:#fff; position:absolute; z-index:2;}
.SonlineBox .contentBox .closeTrigger{ width:25px; height:25px; display:block; cursor:pointer; position:absolute; top:5px;right:5px;-webkit-transition:all 0.8s ease-out;}
.SonlineBox .contentBox .closeTrigger:hover{-webkit-transform:scale(1) rotate(360deg);}
.SonlineBox .contentBox .listBox{overflow:hidden; margin-bottom:10px;}
.SonlineBox .contentBox .listBox .QQList{ display:block; width:86%; height:22px; margin:10px auto 0px auto;}
.SonlineBox .contentBox .listBox .QQList span{float:left; line-height:22px;}
.SonlineBox .contentBox .listBox .QQList a{float:left;}
jquery脚本代码:
/*
此插件基于Jquery
开发者 yaohucaizi
Blog:http://blog.csdn.net/yaohucaizi/
*/
(function($){
$.fn.Sonline = function(options){
var opts = $.extend({}, $.fn.Sonline.defualts, options);
$.fn.setList(opts); //调用列表设置
if(opts.DefaultsOpen == false){
$.fn.Sonline.close(opts.Position,0);
}
//展开
$("#SonlineBox > .openTrigger").live("click",function(){$.fn.Sonline.open(opts.Position);});
//关闭
$("#SonlineBox > .contentBox > .closeTrigger").live("click",function(){$.fn.Sonline.close(opts.Position,"fast");});
//Ie6兼容或滚动方式显示
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style||opts.Effect==true) {$.fn.Sonline.scrollType();}
else if(opts.Effect==false){$("#SonlineBox").css({position:"fixed"});}
}
//plugin defaults
$.fn.Sonline.defualts ={
Position:"left",//left或right
Top:200,//顶部距离,默认200px
Effect:true, //滚动或者固定两种方式,布尔值:true或
DefaultsOpen:true, //默认展开:true,默认收缩:false
Qqlist:"" //多个QQ用','隔开,QQ和客服名用'|'隔开
}
//展开
$.fn.Sonline.open = function(positionType){
var widthValue = $("#SonlineBox > .contentBox").width();
if(positionType=="left"){$("#SonlineBox > .contentBox").animate({left: 0},"fast");}
else if(positionType=="right"){$("#SonlineBox > .contentBox").animate({right: 0},"fast");}
$("#SonlineBox").css({width:widthValue+4});
$("#SonlineBox > .openTrigger").hide();
}
//关闭
$.fn.Sonline.close = function(positionType,speed){
$("#SonlineBox > .openTrigger").show();
var widthValue =$("#SonlineBox > .openTrigger").width();
var allWidth =(-($("#SonlineBox > .contentBox").width())-6);
if(positionType=="left"){$("#SonlineBox > .contentBox").animate({left: allWidth},speed);}
else if(positionType=="right"){$("#SonlineBox > .contentBox").animate({right: allWidth},speed);}
$("#SonlineBox").animate({width:widthValue},speed);
}
//子插件:设置列表参数
$.fn.setList = function(opts){
$("body").append("
");
if(opts.Qqlist==""){$("#SonlineBox > .contentBox > .listBox").append("
暂无在线客服。
")}
else{var qqListHtml = $.fn.Sonline.splitStr(opts);$("#SonlineBox > .contentBox > .listBox").append(qqListHtml);}
if(opts.Position=="left"){$("#SonlineBox").css({left:0});}
else if(opts.Position=="right"){$("#SonlineBox").css({right:0})}
$("#SonlineBox").css({top:opts.Top});
var allHeights=0;
if($("#SonlineBox > .contentBox").height() < $("#SonlineBox > .openTrigger").height()){
allHeights = $("#SonlineBox > .openTrigger").height()+4;
} else{allHeights = $("#SonlineBox > .contentBox").height()+4;}
$("#SonlineBox").height(allHeights);
if(opts.Position=="left"){$("#SonlineBox > .openTrigger").css({left:0});}
else if(opts.Position=="right"){$("#SonlineBox > .openTrigger").css({right:0});}
}
//滑动式效果
$.fn.Sonline.scrollType = function(){
$("#SonlineBox").css({position:"absolute"});
var topNum = parseInt($("#SonlineBox").css("top")+"");
$(window).scroll(function(){
var scrollTopNum = $(window).scrollTop();//获取网页被卷去的高
$("#SonlineBox").stop(true,true).delay(0).animate({top:scrollTopNum+topNum},"slow");
});
}
//分割QQ
$.fn.Sonline.splitStr = function(opts){
var strs= new Array(); //定义一数组
var QqlistText = opts.Qqlist;
strs=QqlistText.split(","); //字符分割
var QqHtml=""
for (var i=0;i
var subStrs= new Array(); //定义一数组
var subQqlist = strs[i];
subStrs = subQqlist.split("|"); //字符分割
QqHtml = QqHtml+"
"
}
return QqHtml;
}
})(jQuery);
效果图如下:
所需素材下载: 下载链接
本文由 yaohucaizi 原创,如需转载请注明出处,版权所有 侵权必究!
java 在线qq客服_jquery实现漂浮在网页右侧的qq在线客服插件相关推荐
- php 网站在线客服插件,jquery实现漂浮在网页右侧的qq在线客服插件示例_jquery
很实用的一款QQ在线客服代码,点击QQ图标,可直接与客服对话.具体实现代码如下: html页面: jquery实现qq客服 css样式: /*默认蓝色*/ .SonlineBox{ width:162 ...
- QQ在线客服JS代码,自适应漂浮在网页右侧
漂浮在网页右侧的QQ在线客服代码,自适应浏览器调试,当你拖动滚动条的时候它会自动计算始终漂浮于某一位置,而且是动画特效,很不错,你也可以把它改成一个漂浮广告,只用换掉表格里的内容就可以了. <h ...
- php右侧弹窗QQ客服,JavaScript_网页右侧悬浮滚动在线qq客服代码示例,网页右侧悬浮滚动QQ在线客服 - phpStudy...
网页右侧悬浮滚动在线qq客服代码示例 网页右侧悬浮滚动QQ在线客服代码 function myEvent(obj,ev,fn){ if (obj.attachEvent){ obj.attachEve ...
- 仿凡科网站右侧悬浮窗 在线客服简约图标大全快捷导航钻芒美化版
之前有发个一个凡科的右侧悬浮窗,今天给加了一些图标样式,新增css判断窗口大小自动隐藏(手机端不会显示),这下比较齐全了. 可以自己自定义图标,在css更改图片链接即可(背景图标和鼠标hover浮动图 ...
- 腾讯QQ、淘宝旺旺、微软MSN、谷歌Gtalk 在线客服代码
腾讯QQ.淘宝旺旺.微软MSN.谷歌Gtalk 在线客服代码 腾讯QQ在线客服代码的生成 访问: http://imis.qq.com/webpresence/code.shtml 选择在线状态图片风 ...
- 网页中添加QQ在线客服
方法一:调用本地已安装的QQ进行会话 其实这么写会有一个问题,如果对方不是你的好友,你需要添加好友等对方验证后才能发起对话. 方法二:腾讯的QQ在线-QQ通信组件 在线咨询 使用客服QQ登陆QQ推广页 ...
- html5固定右侧qq客服,固定在网页右侧浮的QQ在线客服.doc
固定在网页右侧浮的QQ在线客服 固定在网页右侧悬浮的QQ在线客服 ,,,,,,,html,,,,,,,,PUBLIC,,,,,,,,"-//W3C//DTD,,,,,,,,XHTML,,,, ...
- qq在线模板html,浮动在网页右侧的简洁QQ在线客服
浮动在网页右侧的简洁QQ在线客服-www.mb5u.com .qqbox a:link { color: #000; text-decoration: none; } .qqbox a:visited ...
- html简单右侧客服,浮动在网页右侧的简洁QQ在线客服
浮动在网页右侧的简洁QQ在线客服-www.codefans.net .qqbox a:link { color: #000; text-decoration: none; } .qqbox a:vis ...
最新文章
- LeetCode简单题之寻找比目标字母大的最小字母
- 用户界面设计准则从何而来
- 【bzoj2754】【scoi2012】喵星球上的点名
- Oracle with子句的简单介绍.
- centos nginx不是命令_虚拟机下Centos 8.0 安装PHP+Mysql+Nginx
- 简单说说Java程序和Android开发框架
- uniapp防抖操作
- 面向对象真的需要继承吗?
- 什么是智能合约安全审计
- 一个非常不错的JQ 插件库
- android中怎么播放本地视频播放器,安卓之播放本地视频讲解
- 任务调度 cron使用
- Android EditText 监听回车键
- python学习之钉钉打卡
- 给大家分享一下从卷烟-电子烟-口含烟的发展过程
- [230502]英语阅读长难句分析|共6个
- STM32学习笔记——CH340一键下载电路
- Linux小游戏汇总
- bad_weak_ptr的原因
- pandas 保存excel 数值显示科学计数法的问题
热门文章
- 【Python实战】激情澎湃,2023极品劲爆舞曲震撼全场,爬虫一键采集DJ大串烧,一曲醉人女声DJ舞曲,人人都听醉~(排行榜采集,妙啊~)
- 小米6 WiFi验证门户中的RCE漏洞
- 信号处理的神经网络方法,神经网络数据分析步骤
- 离散数学c语言实验报告,离散数学数理逻辑C++或C语言实验报告
- 2021年制冷与空调设备运行操作考试报名及制冷与空调设备运行操作考试试卷
- linux vim 命令是什么,vim命令是什么
- 第五十七篇:VS2015建立一个完整的c++工程:头文件.h 源文件.cpp,自动生成类
- 电磁兼容整改100个小技巧
- php设置excel函数,【php函数】php操作excel
- 如何用语雀画板,轻松画出架构图?