现在的位置: 首页 > 综合 > 正文

jquery 插件之参数制作

2018年05月07日 ⁄ 综合 ⁄ 共 6210字 ⁄ 字号 小 中 大 ⁄ 评论关闭

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

[javascript] view
plaincopy

  1. jQuery.fn.shadow =function(){  
  2.     return this.each(function(){  
  3.         var $originalElement = jQuery(this);  
  4.         for(var i = 0;i < 5;i++){  
  5.             $originalElement.clone()  
  6.             .css({  
  7.                 position :"absolute",  
  8.                 left :$originalElement.offset().left + i,  
  9.                 top :$originalElement.offset().top + i,  
  10.                 margin : 0,  
  11.                 zIndex : -1,  
  12.                 opacity : 0.1  
  13.             })  
  14.             .appendTo("body");  
  15.         }  
  16.     })  
  17. }  

调用的例子：$("h1").shadow();


2、简单的参数

[javascript] view
plaincopy

  1. jQuery.fn.shadow =function(slices,opacity,zIndex){  
  2.     return this.each(function(){  
  3.         var $originalElement = jQuery(this);  
  4.         for(var i = 0;i < slices;i++){  
  5.             $originalElement.clone()  
  6.             .css({  
  7.                 position :"absolute",  
  8.                 left :$originalElement.offset().left + i,  
  9.                 top :$originalElement.offset().top + i,  
  10.                 margin : 0,  
  11.                 zIndex : zIndex,  
  12.                 opacity : opacity  
  13.             })  
  14.             .appendTo("body");  
  15.         }  
  16.     })  
  17. }  

调用的例子：$("h1").shadow(10,0.1,-1);

 

3、参数的映射

[javascript] view
plaincopy

  1. jQuery.fn.shadow =function(opts){  
  2.     return this.each(function(){  
  3.         var $originalElement = jQuery(this);  
  4.         for(var i = 0;i < opts.slices;i++){  
  5.             $originalElement.clone()  
  6.             .css({  
  7.                 position :"absolute",  
  8.                 left :$originalElement.offset().left + i,  
  9.                 top : $originalElement.offset().top+ i,  
  10.                 margin : 0,  
  11.                 zIndex :opts.zIndex,  
  12.                 opacity : opts.opacity  
  13.             })  
  14.             .appendTo("body");  
  15.         }  
  16.     })  
  17. }  

调用的例子：

$("h1").shadow({

       slices : 5,

       opacity : 0.25,

       zIndex : -1

});

 

4、默认的参数值(这个是最重要的)

[javascript] view
plaincopy

  1. jQuery.fn.shadow =function(options){  
  2.     var defaults = {  
  3.       slices : 5,  
  4.       opacity : 0.1,  
  5.       zIndex : -1  
  6.     };  
  7.     //options中如果存在defaults中的值，则覆盖defaults中的值  
  8.     var opts = jQuery.extend(defaults,options);  
  9.     return this.each(function(){  
  10.         var $originalElement = jQuery(this);  
  11.         for(var i = 0;i < opts.slices;i++){  
  12.             $originalElement.clone()  
  13.             .css({  
  14.                 position :"absolute",  
  15.                 left :$originalElement.offset().left + i,  
  16.                 top :$originalElement.offset().top + i,  
  17.                 margin : 0,  
  18.                 zIndex :opts.zIndex,  
  19.                 opacity : opts.opacity  
  20.             })  
  21.             .appendTo("body");  
  22.         }  
  23.     })  
  24. }  

调用的例子：

$("h1").shadow({

       opacity : 0.05

});

 

5、回调函数

[javascript] view
plaincopy

  1. jQuery.fn.shadow =function(options){  
  2.     var defaults = {  
  3.       slices : 5,  
  4.       opacity : 0.1,  
  5.       zIndex : -1,  
  6.       sliceOffset : function(i){  
  7.           return {x:i,y:i}  
  8.       }  
  9.     };  
  10.     //options中如果存在defaults中的值，则覆盖defaults中的值  
  11.     var opts = jQuery.extend(defaults,options);  
  12.     return this.each(function(){  
  13.         var $originalElement = jQuery(this);  
  14.         for(var i = 0;i < opts.slices;i++){  
  15.             //调用回调函数  
  16.             var offset = opts.sliceOffset(i);  
  17.             $originalElement.clone()  
  18.             .css({  
  19.                 position :"absolute",  
  20.                 left :$originalElement.offset().left + offset.x,  
  21.                 top :$originalElement.offset().top + offset.y,  
  22.                 margin : 0,  
  23.                 zIndex :opts.zIndex,  
  24.                 opacity : opts.opacity  
  25.             })  
  26.             .appendTo("body");  
  27.         }  
  28.     })  
  29. }  

调用的例子：

$("h1").shadow({

       sliceOffset : function(i){

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

       }

});


6、可定制的默认值

[javascript] view
plaincopy

  1. jQuery.fn.shadow =function(options){  
  2.     //默认值被放在投影插件的命名空间里了  
  3.     var opts =jQuery.extend({},jQuery.fn.shadow.defaults,options);  
  4.     return this.each(function(){  
  5.         var $originalElement = jQuery(this);  
  6.         for(var i = 0;i < opts.slices;i++){  
  7.             //调用回调函数  
  8.             var offset = opts.sliceOffset(i);  
  9.             $originalElement.clone()  
  10.             .css({  
  11.                 position :"absolute",  
  12.                 left :$originalElement.offset().left + offset.x,  
  13.                 top :$originalElement.offset().top + offset.y,  
  14.                 margin : 0,  
  15.                 zIndex :opts.zIndex,  
  16.                 opacity : opts.opacity  
  17.             })  
  18.             .appendTo("body");  
  19.         }  
  20.     })  
  21. }  
  22. jQuery.fn.shadow.defaults= {  
  23.     slices : 5,  
  24.     opacity : 0.1,  
  25.     zIndex : -1,  
  26.     sliceOffset : function(i){  
  27.         return { x : i, y : i}  
  28.     }  
  29. }  

默认值被放在了命名空间里，可以通过$.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、添加选择符表达式

[javascript] view
plaincopy

  1. /* 
  2.  *添加选择符表达式 
  3.  * 
  4.  * 参数： 
  5.  *     element：当前的DOM元素，大多数选择符都需要这个 
  6.  *     index:Dom元素在结果集中的索引，这个参数对:eq()和:lt()等选择符比较有用 
  7.  *      matches：包含解析当前选择符的正则表达式结果的数组。通常matches[3]是这个数组中 
  8.  *             唯一有用的项；对于:a(b)形式的选择符而言，matches[3]项中包含着b，即圆括号中的 
  9.  *             文本。 
  10.  *     set:到目前为止匹配的整个DOM元素的集合，这个参数用的比较少。 
  11.  * 
  12.  */  
  13. jQuery.extend(jQuery.expr[':'],{  
  14.     'css' : function(element,index,matches,set){  
  15.         //修改之后的matches[3]:width < 100  
  16.         var parts = matches[3].split("");  
  17.         var value =parseFloat(jQuery(element).css(parts[0]));  
  18.         switch(parts[1]){  
  19.             case '<' :  
  20.                 return value <parseInt(parts[2]);  
  21.             case '<=' :  
  22.                 return value <=parseInt(parts[2]);  
  23.             case '=' :  
  24.             case '==' :  
  25.                 return value ==parseInt(parts[2]);  
  26.                  
  27.             case '>=' :  
  28.                 return value >= parseInt(parts[2]);  
  29.             case '>' :  
  30.                 return value >parseInt(parts[2]);       
  31.         }  
  32.     }  
  33. })  

调用：

<divstyle="width: 500px;">Desrunt mollit anim id estlaborum</div>

<divstyle="width: 200px;">2222222</div>

<divstyle="width:30px;">33333333333333333333333</div>

<divstyle="width: 300px;">4444444444444444</div>


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

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞