原创Jquery实现多皮肤悬浮QQ客服插件
dengjianbin
12年前
此插件一款很实用的功能，基本每个企业网站都需要，用法很简单，可以支持6种皮肤的切换，可灵活设置
1、左右浮动
2、是否最小化显示
3、皮肤参数的设置
4、滑动的速度
效果如下：
插件代码如下：
;(function($){ $.fn.fix = function(options){ var defaults = { float : 'left', minStatue : false, skin : 'gray', durationTime : 1000 } var options = $.extend(defaults, options); this.each(function(){ //获取对象 var thisBox = $(this), closeBtn = thisBox.find('.close_btn' ), show_btn = thisBox.find('.show_btn' ), sideContent = thisBox.find('.side_content'), sideList = thisBox.find('.side_list') ; var defaultTop = thisBox.offset().top; //对象的默认top thisBox.css(options.float, 0); if(options.minStatue){ $(".show_btn").css("float", options.float); sideContent.css('width', 0); show_btn.css('width', 25); } //皮肤控制 if(options.skin) thisBox.addClass('side_'+options.skin); //核心scroll事件 $(window).bind("scroll",function(){ var offsetTop = defaultTop + $(window).scrollTop() + "px"; thisBox.animate({ top: offsetTop }, { duration: options.durationTime, queue: false //此动画将不进入动画队列 }); }); //close事件 closeBtn.bind("click",function(){ sideContent.animate({width: '0px'},"fast"); show_btn.stop(true, true).delay(300).animate({ width: '25px'},"fast"); }); //show事件 show_btn.click(function() { $(this).animate({width: '0px'},"fast"); sideContent.stop(true, true).delay(200).animate({ width: '154px'},"fast"); }); }); //end this.each }; })(jQuery);