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：/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+"

"+subStrs[1]+"："

}

return QqHtml;

}

})(jQuery);

效果图如下：

所需素材下载： 下载链接

本文由 yaohucaizi 原创，如需转载请注明出处，版权所有 侵权必究！