文章目录
  1. 1. 返回顶部插件
    1. 1.1. 模板图如下

返回顶部插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/*
***
auther:LGF;
date:2017-06-10;
blog:lgf196.top;
plug-in:blacktop or tab;
direction:只需引用到项目中即可,用法:$('xxx').blacktop({属性:值});
***
*/
if(window.jQuery===undefined){
throw new Error("此插件依赖于jQuery,请引入jQuery库");
}
;(function($){
$.fn.blacktop=function(opt){ //返回顶部插件开始
var defaults={
spend:600, //动画的时间
position:'true', //定位
right:30,
bottom:30,
autohide:'true', //是否隐藏
offset:$(window).height() //屏幕的高度
};
var option=$.extend(defaults,opt);
//this.each(function(){
//var _this=$(this); //如果用this.each()的话此时this要写成$(this)
var _this=this;
var win = $(window);
if(option.autohide){
_this.css({
'display':'none',
'cursor':'pointer'
});
}
if(option.position){
_this.css({
'position': 'fixed',
'right': option.right+'px',
'bottom': option.bottom+'px',
});
}
_this.click(function(){
$('html, body').animate({scrollTop: 0}, option.spend);
});
win.scroll(function(){
var scrolling = win.scrollTop();
if(option.autohide){
if(scrolling > option.offset){
_this.fadeIn(option.spend);
}
else _this.fadeOut(option.spend);
}
});
//});
return this;
}; //返回顶部插件结束
$.fn.tab=function(opt){ //选项卡插件
var defaults={
tabname:"", //切换的名字
tabdiv:"", //切换的内容
addclass:"", //要添加的class
bind:"click" //事件的模式
};
var option=$.extend(defaults,opt);
var tabname= $(option.tabname);
tabname.eq(0).addClass(option.addclass);
tabname.bind(option.bind,function(){
var index=$(this).index();
$(this).addClass(option.addclass).siblings().removeClass(option.addclass);
$(option.tabdiv).eq(index).show().siblings().hide();
});
return this;
};
})(jQuery);

模板图如下


提示:只需将代码引入项目中即可,代码没有压缩,可以自行压缩

文章目录
  1. 1. 返回顶部插件
    1. 1.1. 模板图如下