管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　很实用的一款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="js/jquery-1.8.3.min.js"></script>

　　<script type="text/javascript" src="js/qqservice.js"></script>

　　<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);

　　效果图如下：

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

　　

教程首页 更多教程