jQuery插件制作之参数用法实例分析

本文实例讲述了jQuery插件制作之参数用法。分享给大家供大家参考。具体分析如下：

1、无参数实现文字阴影效果

jQuery.fn.shadow =function(){  return this.each(function(){   var $originalElement = jQuery(this);   for(var i = 0;i < 5;i++){    $originalElement.clone()    .css({     position :"absolute",     left :$originalElement.offset().left + i,     top :$originalElement.offset().top + i,     margin : 0,     zIndex : -1,     opacity : 0.1    })    .appendTo("body");   }  }) }

调用的例子： 代码如下:$("h1").shadow();

2、简单的参数

jQuery.fn.shadow =function(slices,opacity,zIndex){  return this.each(function(){   var $originalElement = jQuery(this);   for(var i = 0;i < slices;i++){    $originalElement.clone()    .css({     position :"absolute",     left :$originalElement.offset().left + i,     top :$originalElement.offset().top + i,     margin : 0,     zIndex : zIndex,     opacity : opacity    })    .appendTo("body");   }  }) }

调用的例子： 代码如下:$("h1").shadow(10,0.1,-1);

3、参数的映射

jQuery.fn.shadow =function(opts){  return this.each(function(){   var $originalElement = jQuery(this);   for(var i = 0;i < opts.slices;i++){    $originalElement.clone()    .css({     position :"absolute",     left :$originalElement.offset().left + i,     top : $originalElement.offset().top+ i,     margin : 0,     zIndex :opts.zIndex,     opacity : opts.opacity    })    .appendTo("body");   }  }) }

调用的例子：
代码如下:$("h1").shadow({
    slices : 5,
    opacity : 0.25,
    zIndex : -1
});
 
4、默认的参数值(这个是最重要的)

jQuery.fn.shadow =function(options){  var defaults = {   slices : 5,   opacity : 0.1,   zIndex : -1  };  //options中如果存在defaults中的值，则覆盖defaults中的值  var opts = jQuery.extend(defaults,options);  return this.each(function(){   var $originalElement = jQuery(this);   for(var i = 0;i < opts.slices;i++){    $originalElement.clone()    .css({     position :"absolute",     left :$originalElement.offset().left + i,     top :$originalElement.offset().top + i,     margin : 0,     zIndex :opts.zIndex,     opacity : opts.opacity    })    .appendTo("body");   }  }) }

调用的例子：
代码如下:$("h1").shadow({
    opacity : 0.05
});
 
5、回调函数

jQuery.fn.shadow =function(options){  var defaults = {   slices : 5,   opacity : 0.1,   zIndex : -1,   sliceOffset : function(i){    return {x:i,y:i}   }  };  //options中如果存在defaults中的值，则覆盖defaults中的值  var opts = jQuery.extend(defaults,options);  return this.each(function(){   var $originalElement = jQuery(this);   for(var i = 0;i < opts.slices;i++){    //调用回调函数    var offset = opts.sliceOffset(i);    $originalElement.clone()    .css({     position :"absolute",     left :$originalElement.offset().left + offset.x,     top :$originalElement.offset().top + offset.y,     margin : 0,     zIndex :opts.zIndex,     opacity : opts.opacity    })    .appendTo("body");   }  }) }