jquery 插件之参数制作

分手后的思念是犯贱 2021-09-10 10:36 393阅读 0赞

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

**\[javascript\]**  [view plain][] [copy][view plain]

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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

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

[view plain]: http://blog.csdn.net/myjlvzlp/article/details/8169532#