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

：

/*
此插件基于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>”);