在线QQ客服悬浮插件
1、先来粘贴一些html这里由于把一些代码写到了js里，所以html比较少哦
<div style="height:3000px"></div> 简单吧
2、下面就是样式喽：.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;}代码也不是很多吧
3、接下来的js比较多喽
$(function(){ $("body").Sonline({ Position:"right",//left或right Top:200,//顶部距离，默认200px Effect:true, //滚动或者固定两种方式，布尔值：true或false DefaultsOpen:true, //默认展开：true,默认收缩：false Qqlist:"402719549|客服a,402719549|客服b,402719549|客服c,402719549|客服d,402719549|客服e" //多个QQ用','隔开，QQ和客服名用'|'隔开 });}) 我做的时候这段是放在页面里的哦，这个看你个人的习惯喽
下面这些呢是写的外部js 文件里的
(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'>暂无在线客服。")} 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); 怎么样比较多吧，不过还好了，有注释哦，看起来比较方便，也可以根据自己的需要进行修改哦，知识麻，没有不麻烦的吧，拿来用，再改一下蛮好的
4、当然喽，说了这么多，最后还是要看效果的
浏览页面时效果是这个样式的哦，如果不想看到的话还可以这样哦，点击关闭按钮后自己就会收起来的，一点也不麻烦
怎么样很小巧吧
