很实用的一款QQ在线客服代码，点击QQ图标，可直接与客服对话。具体实现代码如下：
html页面：
复制代码 代码如下:
<!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=gb2312" />
<title>jquery实现qq客服</title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.3.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/qqservice.js"><script type="text/javascript">
$(function(){
$("body").Sonline({
Position:"right",//left或right
Top:200,//顶部距离，默认200px
Effect:true, //滚动或者固定两种方式，布尔值：true或false
DefaultsOpen:true, //默认展开：true,默认收缩：false
Qqlist:"<SPAN>435027|客服01,435027|客服02,435027|客服03,435027|客服04,435027|客服05</SPAN>" //多个QQ用','隔开，QQ和客服名用'|'隔开
});
})
</script>
</head>
<body>
<div style="height:2500px"></div>
<div style="text-align:center;clear:both"></div>
</body>
</html>
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("<div class='SonlineBox' id='SonlineBox' style='top:-600px;'><div class='openTrigger' style='display:none' title='展开'></div><div class='contentBox'><div class='closeTrigger'><img src='images/closeBtnImg.gif' title='关闭' /></div><div class='titleBox'><span>客服中心</span></div><div class='listBox'></div></div></div>");
if(opts.Qqlist==""){$("#SonlineBox > .contentBox > .listBox").append("<p style='padding:15px'>暂无在线客服。</p>")}
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<strs.length;i++){
var subStrs= new Array(); //定义一数组
var subQqlist = strs[i];
subStrs = subQqlist.split("|"); //字符分割
QqHtml = QqHtml+"<div class='QQList'><span>"+subStrs[1]+"：</span><a target='_blank' href='http://wpa.qq.com/msgrd?v=3&uin="+subStrs[0]+"&site=qq&menu=yes'><img border='0' src='http://wpa.qq.com/pa?p=2:"+subStrs[0]+":41 &r=0.22914223582483828' alt='点击这里'></a></div>"
}
return QqHtml;
}
})(jQuery);
效果图如下：
html页面：
复制代码 代码如下:
<!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=gb2312" />
<title>jquery实现qq客服</title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.3.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/qqservice.js"><script type="text/javascript">
$(function(){
$("body").Sonline({
Position:"right",//left或right
Top:200,//顶部距离，默认200px
Effect:true, //滚动或者固定两种方式，布尔值：true或false
DefaultsOpen:true, //默认展开：true,默认收缩：false
Qqlist:"<SPAN>435027|客服01,435027|客服02,435027|客服03,435027|客服04,435027|客服05</SPAN>" //多个QQ用','隔开，QQ和客服名用'|'隔开
});
})
</script>
</head>
<body>
<div style="height:2500px"></div>
<div style="text-align:center;clear:both"></div>
</body>
</html>
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("<div class='SonlineBox' id='SonlineBox' style='top:-600px;'><div class='openTrigger' style='display:none' title='展开'></div><div class='contentBox'><div class='closeTrigger'><img src='images/closeBtnImg.gif' title='关闭' /></div><div class='titleBox'><span>客服中心</span></div><div class='listBox'></div></div></div>");
if(opts.Qqlist==""){$("#SonlineBox > .contentBox > .listBox").append("<p style='padding:15px'>暂无在线客服。</p>")}
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<strs.length;i++){
var subStrs= new Array(); //定义一数组
var subQqlist = strs[i];
subStrs = subQqlist.split("|"); //字符分割
QqHtml = QqHtml+"<div class='QQList'><span>"+subStrs[1]+"：</span><a target='_blank' href='http://wpa.qq.com/msgrd?v=3&uin="+subStrs[0]+"&site=qq&menu=yes'><img border='0' src='http://wpa.qq.com/pa?p=2:"+subStrs[0]+":41 &r=0.22914223582483828' alt='点击这里'></a></div>"
}
return QqHtml;
}
})(jQuery);
效果图如下：
标签：
漂浮,右侧,在线客服
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“jquery实现漂浮在网页右侧的qq在线客服插件示例”评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。