添加全局函数$.extend和对象方法$.fn

weixin_33940102

于 2017-08-07 12:49:00 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tinaluo/p/7298574.html

本文介绍了一个使用jQuery实现的阴影效果插件，该插件通过克隆元素并调整其位置和透明度来为页面上的元素添加阴影。文章提供了完整的代码示例，并展示了如何设置阴影的不透明度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function () {  
    $.fn.shadow = function (opts) {
        return this.each(function () {

            var defaults = { /*指定默认值*/
                copies: 5,
                opacity: 0.3
                //copyOffset: function (index) {  //回调函数
                //    return {};
                //}
            };

            var options = $.extend(defaults, opts);/*替换*/

            var $originalElement = $(this);
            for (var i = 0; i < options.copies; i++) {
                $originalElement
                .clone()
                .css({
                    position: 'absolute',
                    left: $originalElement.offset().left + i,
                    top: $originalElement.offset().top + i,
                    margin: 0,
                    zIndex: -1,
                    opacity: options.opacity
                })
                .appendTo('body');
            }
        });
    }
    $('h1').shadow({ opacity: 0.1 });
});