jQuery插件的制作之方法的参数_jquery添加一个文本块加投影的插件方法,将一些用户可能会修改的数据值定义为-CSDN博客

该博客介绍了如何使用jQuery创建文字阴影效果的多种方法，包括无参数、简单参数、参数映射、默认参数值、回调函数以及选择符表达式的应用。通过示例代码展示了如何自定义阴影的切片数量、透明度、Z轴位置和偏移量，以及如何根据条件选择元素。这为前端开发者提供了灵活的文字装饰手段。

摘要由CSDN通过智能技术生成

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 <parseInt(parts[2]);
            case '<=' :
                return value <=parseInt(parts[2]);
            case '=' :
            case '==' :
                return value ==parseInt(parts[2]);
            case '>=' :
                return value >= parseInt(parts[2]);
            case '>' :
                return value >parseInt(parts[2]);     
        }
    }
})

调用：

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