php 网站在线客服插件,jquery实现漂浮在网页右侧的qq在线客服插件示例_jquery

ゞ浴缸里的玫瑰 2023-01-13 13:56 249阅读 0赞

很实用的一款QQ在线客服代码，点击QQ图标，可直接与客服对话。具体实现代码如下：

html页面：

jquery实现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("

![closeBtnImg.gif][]

客服中心");

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;ivar subStrs= new Array(); //定义一数组

var subQqlist = strs\[i\];

subStrs = subQqlist.split("|"); //字符分割

QqHtml = QqHtml+"

"+subStrs\[1\]+"：![pa?p=2:%22+subStrs%5B0%5D+%22:41%20&r=0.22914223582483828][pa_p_2_22_subStrs_5B0_5D_22_41_20_r_0.22914223582483828]"

return QqHtml;

\})(jQuery);

效果图如下：

![ae56b03ca0c9e671e8984bc3d1e60e4c.png][]

本文原创发布php中文网，转载请注明出处，感谢您的尊重！

[closeBtnImg.gif]: https://www.php.cn/images/closeBtnImg.gif
[pa_p_2_22_subStrs_5B0_5D_22_41_20_r_0.22914223582483828]: http://wpa.qq.com/pa?p=2:%22+subStrs%5B0%5D+%22:41%20&r=0.22914223582483828
[ae56b03ca0c9e671e8984bc3d1e60e4c.png]: /images/20221022/ce2fb4b7edd1400385a756636372bb06.png