一、关于编写jQuery插件、需要理解如下几点:
1、闭包的概念
2、变量作用域
3、Function对象的继承
4、匿名函数执行
5、prototype
关于这几个概念的理解、请参与其他文档
二、jQuery插件类型
1、全局插件
使用jQuery或$进行调用、属于jQuery 对象本身的方法 、如:$.ajax/$.parseJSON
2、局部插件
使用jQuery对象进行调用、属于jQuery成员的方法 。如:$("div").css("background","red");
三、定义简单的jQuery插件
1、注意事项
需要避免$变量冲突、所以执行匿名函数、使用闭包的概念
需要使用jQuery实例调用、需要使用$.fn.fname = function(){} 也可以使用$.fn.extend({f1:function(){},f2:function(){},f3:function(){}});
需要定义全局插件、则:$.fname = function() {} 也可以使用 $.extend({f1:function(){},f2:function(){},f3:function(){}});
jQuery 中 、$.fn == jQuery.fn == jQuery.prototype
2、关于extend 实现了对象的原型拷贝、即继承
四、简单的jQuery插件,欢迎指正
(function($) {
//百叶窗
$.fn.according = function(options) {
var settings = $.extend({
header:"span", //列表名称
body:"li", //according内容
current:"current",//当前展示的列表的class
color:"#f88" //according内容的背景颜色
},options||{});
var that = this.find(settings.header);
that.nextAll(settings.body).hide();
that.filter("."+settings.current)
.nextAll(settings.body)
.show()
.css("background",settings.color);
that.click(function(){
var has = $(this).hasClass(settings.current);
if(has) {
$(this).removeClass(settings.current);
$(this).nextAll(settings.body).slideUp();
} else {
that.removeClass(settings.current)
.nextAll(settings.body)
.slideUp();
$(this).addClass(settings.current)
.nextAll(settings.body).slideDown()
.css("background",settings.color);
}
});
return this;
}
//The drop in advertising 顶部广告展示
$.fn.dropAd = function(options) {
var settings = $.extend({
top:-300, //top
timeout:3000, //展示时间 毫秒
width:"100%", //宽
height:"300px",//高
position:"absolute", //定位
speed:3 //滚动速度
},options || {});
this.css({"top":settings.top,
"width":settings.width,
"height":settings.height,
"position":settings.position});
var ttop = settings.top,down = 0,up = 0,that = this;
var bodyTop = 0;
down = setInterval(down$,1);
function down$() {
ttop += settings.speed;
bodyTop += settings.speed;
that.css("top",ttop+"px");
that.nextAll().css("top",bodyTop+"px");
if(ttop >= 0) {
clearInterval(down);
setTimeout(up$,settings.timeout);
}
}
function up$() {
if(ttop >= 0) up = setInterval(up$,1);
ttop -= settings.speed;
bodyTop -= settings.speed;
that.css("top",ttop+"px");
that.nextAll().css("top",bodyTop+"px");
if(ttop <= settings.top) {
clearInterval(up);
}
}
return this;
}
//回到顶部
$.fn.returnTop = function(options) {
var settings = $.extend({
speed:200 //滚动速度
},options||{});
var windowWidth = $(window).innerWidth();
var windowHeight = $(window).innerHeight();
var scrollNum = 0,stop = 0;
var button = this;
var buttonWidth = button.outerWidth();
var buttonHeight = button.outerHeight();
button.css({
zIndex:999999,
left:windowWidth - buttonWidth +"px",
top:windowHeight - buttonHeight + "px"
});
$(window).scroll(function(){
scrollNum = $(window).scrollTop();
button.css("top",windowHeight - buttonHeight + scrollNum +"px");
});
button.click(function(){
if(scrollNum <= 0) return;
stop = setInterval(topest,1);
})
function topest() {
if(scrollNum <= 0) {
clearInterval(stop)
};
var T = scrollNum-settings.speed;
if(T < 0) T = 0;
$(window).scrollTop(T);
}
return this;
}
//抖动效果
$.fn.shake = function(options) {
var settings = $.extend({
time:5000, //抖动时长 单位毫秒
intensity:0.5, //抖动强度 最大值为1
area:10, //抖动区域 单位为像素
position:"relative" //抖动定位
},options||{});
var that = this;
var pos = that.position();
var left = pos.left,top = pos.top,mark = 0,random = 0,offset,add = 0;
that.css("position",settings.position);
mark = setInterval(fly,50/settings.intensity);
setTimeout(stop,settings.time);
function stop() {
clearInterval(mark);
setCss(pos.top,pos.left);
}
function setCss(t,l) {
that.css({top:t+"px",left:l+"px"});
}
function fly() {
random = Math.random();
add = random < 0.25?1:(random < 0.5 ? 2:(random < 0.75 ? 2:1))
offset = random*settings.area;
if(offset > settings.area) offset = settings.area;
if(add == 1) {
top -= offset;
left -= offset;
} else if(add == 2){
top += offset;
left += offset;
}
setCss(top,left);
}
return this;
}
})(jQuery);