萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery插件制作之參數用法實例分析

jQuery插件制作之參數用法實例分析

   本文實例講述了jQuery插件制作之參數用法。分享給大家供大家參考。具體分析如下:

  1、無參數實現文字陰影效果

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 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、簡單的參數

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 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、參數的映射

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 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、默認的參數值(這個是最重要的)

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 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、回調函數

  ?

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 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"); } }) }

  調用的例子:

  代碼如下:

  $("h1").shadow({

  sliceOffset : function(i){

  return {x : -i,y : -2 * i}

  }

  });

  6、可定制的默認值

  ?

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 jQuery.fn.shadow =function(options){ //默認值被放在投影插件的命名空間裡了 var opts =jQuery.extend({},jQuery.fn.shadow.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.offse
copyright © 萬盛學電腦網 all rights reserved