原創Jquery實現多皮膚懸浮QQ客服插件
此插件一款很實用的功能，基本每個企業網站都需要，用法很簡單，可以支持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);
本文由用戶 dengjianbin 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！