玩法介绍当前位置:鸿宇娱乐 > 玩法介绍 > >

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

  

[jQuery,插件制作,参数用法]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");  }  })  }
  
  

调用的例子:  
   代码如下:

$("h1").shadow({  
  sliceOffset : function(i){  
  return {x : -i,y : -2 * i}  
  }  
  });
  

  

6、可定制的默认值  

  
  
  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.offset().left + offset.x,  top :$originalElement.offset().top + offset.y,  margin : 0,  zIndex :opts.zIndex,  opacity : opts.opacity  })  .appendTo("body");  }  })  }  jQuery.fn.shadow.defaults= {  slices : 5,  opacity : 0.1,  zIndex : -1,  sliceOffset : function(i){  return { x : i, y : i}  }  }
  
  

默认值被放在了命名空间里,可以通过$.fn.shadow.default直接引用。而对$.extend()的调用也必须修改,以适应这种变化。由于现在所有对.shadow()的调用都要重用defaults映射,因此不能让他$.extend()修改它,因此要将一个空映射({})作为$.extend()的第一个参数,让这个新对象成为被修改的目标。

  

  

调用方法:  
   代码如下:

jQuery.fn.shadow.defaults.slices= 10;  
  $("h1").shadow({  
  sliceOffset : function(i){  
  return { x : -i, y : i}  
  }  
  });
  

  

7、添加选择符表达式  

  
  
  /*  *添加选择符表达式  *  * 参数:  *  鸿宇娱乐平台 element:当前的DOM元素,大多数选择符都需要这个  *  index:Dom元素在结果集中的索引,这个参数对:eq()和:lt()等选择符比较有用  *  matches:包含解析当前选择符的正则表达式结果的数组。通常matches[3]是这个数组中  *    唯一有用的项;对于:a(b)形式的选择符而言,matches[3]项中包含着b,即圆括号中的  *    文本。

  * set:到目前为止匹配的整个DOM元素的集合,这个参数用的比较少。

  *  */  jQuery.extend(jQuery.expr[':'],{  'css' : function(element,index,matches,set){  //修改之后的matches[3]:width < 100  var parts = matches[3].split("");  var value =parseFloat(jQuery(element).css(parts[0]));  switch(parts[1]){  case '<' :  return value =' :  return value >= parseInt(parts[2]);  case '>' :  return value >parseInt(parts[2]);  }  }  })  

  
  

调用:  

  
  
  Desrunt mollit anim id estlaborum
  2222222  33333333333333333333333  4444444444444444      

代码如下:

$("div:css(width< 100)").addClass("heighlight");
  

  

希望本文所述对大家的jQuery程序设计有所帮助。

  

(责任编辑:admin)

上一篇:jQuery Ajax 实现在html页面实时显示用户登录状态

下一篇:Javascript setInterval的两种调用方法(实例讲解)

推荐内容

客户服务热线

010-400-12345

在线客服