1、无参数实现文字阴影效果
[javascript]
view plain
copy
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. "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. "body");
15. }
16. })
17. }
调用的例子：$("h1").shadow();
2、简单的参数
[javascript]
view plain
copy
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. "absolute",
8. left :$originalElement.offset().left + i,
9. top :$originalElement.offset().top + i,
10. margin : 0,
11. zIndex : zIndex,
12. opacity : opacity
13. })
14. "body");
15. }
16. })
17. }
调用的例子：$("h1").shadow(10,0.1,-1);
3、参数的映射
[javascript]
view plain
copy
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. "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. "body");
15. }
16. })
17. }
调用的例子：
$("h1").shadow({
slices : 5,
opacity : 0.25,
zIndex : -1
});
4、默认的参数值(这个是最重要的)
[javascript]
view plain
copy
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. "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. "body");
22. }
23. })
24. }
调用的例子：
$("h1").shadow({
opacity : 0.05
});
5、回调函数
6、可定制的默认值
[javascript]
view plain
copy
1. jQuery.fn.shadow =function(options){
2. var defaults = {
3. slices : 5,
4. opacity : 0.1,
5. zIndex : -1,
6. 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. "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. "body");
27. }
28. })
29. }
调用的例子：
$("h1").shadow({
sliceOffset : function(i){
return {x : -i,y : -2 * i}
}
});
[javascript]
view plain
copy
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. "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. "body");
19. }
20. })
21. }
22. jQuery.fn.shadow.defaults= {
23. slices : 5,
24. opacity : 0.1,
25. zIndex : -1,
26. 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
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");
