jQuery插件（开发方式）

一、关于编写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);