Javascript 一个好的jQuery下拉阴影插件？

我在业余时间尝试学习javascript和jQuery。我通常在网站上做实验。我想在页面上出现某个元素时获得一种微弱的阴影效果。这使-

这看起来好像该元素位于页面上其他元素的上方

使这个新元素成为重要的研究对象

我如何使用jQuery获得这个。在一些地方，他们建议使用“图像精灵”。但是我想避免使用图像，因为-

我不想每次都打开photoshop，我想为一些新元素添加阴影效果

图像加载需要时间。因此，只要元素出现在页面上，就需要时间来加载图像&阴影效果幻觉就消失了

另外，我听说CSS3内置了这种阴影效果。但是有不同的浏览器使用不同的版本。加上IE*浏览器占大多数。我希望这在IE的所有版本中都能起作用。我如何才能在大多数浏览器中尽可能一致地获得这种效果。

两年前的某个星期，其他人就有这种效果。选择的答案是2007年的，但您可能还想看看其他答案

尽管这是一个观点问题，但我相信CSS3是您最好的选择，它为支持它的浏览器提供了渐进增强功能。以下是dropshadow属性的示例集，如所示：

---

我已经在我的博客上写了一篇关于如何创建jQuery下拉阴影效果的文章。你可以。该插件基本上是在这些元素后面创建一个div，以创建阴影效果

我现在修改了插件，它现在使用CSS3为支持它的浏览器提供阴影效果，或者为不支持它的浏览器提供相同的div阴影效果。代码如下：

/**
 * Drop Shadow Plugin jQuery
 * http://sarfraznawaz.wordpress.com/
 * Author: Sarfraz Ahmed (sarfraznawaz2005@gmail.com)
 */

(function($){

    $.fn.dropshadow = function(settings){
        // Extend default settings
        var opts = $.extend({}, $.fn.dropshadow.defaults, settings);

        // Check if CSS3 is supported
        var style = $('div')[0].style;
        var isCSS3 = style.MozBoxShadow !== undefined || style.WebkitBoxShadow !== undefined || style.BoxShadow !== undefined;

        return this.each(function(settings){
           var options = $.extend({}, opts, $(this).data());
           var $this = $(this);

            if (!isCSS3){
                var styles = {
                    position: 'absolute',
                    width: $this.width() + 'px',
                    height: $this.height() + 'px',
                    backgroundColor: options.shadowColor,
                    zIndex: options.shadowLayer,
                    top: ($this.offset().top + parseInt(options.distance, 10)) + 'px',
                    left: ($this.offset().left + parseInt(options.distance, 10)) + 'px'
                };
            }
            else{

                var boxshadow = options.distance + ' ' + options.distance + ' ' + options.blur + ' ' + options.shadowColor;
                var styles = {
                    position: 'absolute',
                    width: $this.width() + 'px',
                    height: $this.height() + 'px',
                    backgroundColor: options.shadowColor,
                    zIndex: options.shadowLayer,
                    top: $this.offset().top + 'px',
                    left: $this.offset().left + 'px',
                    MozBoxShadow:boxshadow,
                    WebkitBoxShadow:boxshadow,
                    BoxShadow:boxshadow
                };
            }

            $('<div>').appendTo($('body')).css(styles);

        });
    }

   // set default option values
  $.fn.dropshadow.defaults = {
    shadowColor: '#DFDFDF',
    shadowLayer: -1,
    distance:'5px',
    blur:'3px'
  }

})(jQuery);

这是一个相当好的插件

您可以在此处看到演示：

---

是的，在我发布这个问题之前，我看了一下这个链接。我丢弃它主要是因为它是两年前被问到的。从那以后有了很大的变化，加上我不想在我的试验中采用一个未维护的代码库。但是IE呢？大多数人仍然使用IE.IE9支持

box shadow

属性。对于IE的早期版本，您需要使用奥术

blur

过滤器。这是你能得到的最接近的结果：

/**
 * Drop Shadow Plugin jQuery
 * http://sarfraznawaz.wordpress.com/
 * Author: Sarfraz Ahmed (sarfraznawaz2005@gmail.com)
 */

(function($){

    $.fn.dropshadow = function(settings){
        // Extend default settings
        var opts = $.extend({}, $.fn.dropshadow.defaults, settings);

        // Check if CSS3 is supported
        var style = $('div')[0].style;
        var isCSS3 = style.MozBoxShadow !== undefined || style.WebkitBoxShadow !== undefined || style.BoxShadow !== undefined;

        return this.each(function(settings){
           var options = $.extend({}, opts, $(this).data());
           var $this = $(this);

            if (!isCSS3){
                var styles = {
                    position: 'absolute',
                    width: $this.width() + 'px',
                    height: $this.height() + 'px',
                    backgroundColor: options.shadowColor,
                    zIndex: options.shadowLayer,
                    top: ($this.offset().top + parseInt(options.distance, 10)) + 'px',
                    left: ($this.offset().left + parseInt(options.distance, 10)) + 'px'
                };
            }
            else{

                var boxshadow = options.distance + ' ' + options.distance + ' ' + options.blur + ' ' + options.shadowColor;
                var styles = {
                    position: 'absolute',
                    width: $this.width() + 'px',
                    height: $this.height() + 'px',
                    backgroundColor: options.shadowColor,
                    zIndex: options.shadowLayer,
                    top: $this.offset().top + 'px',
                    left: $this.offset().left + 'px',
                    MozBoxShadow:boxshadow,
                    WebkitBoxShadow:boxshadow,
                    BoxShadow:boxshadow
                };
            }

            $('<div>').appendTo($('body')).css(styles);

        });
    }

   // set default option values
  $.fn.dropshadow.defaults = {
    shadowColor: '#DFDFDF',
    shadowLayer: -1,
    distance:'5px',
    blur:'3px'
  }

})(jQuery);

$(window).load(function(){
  $('.shadow').dropshadow({
    shadowColor: '#cccccc',
    shadowLayer: -100,
    distance:'6px',
    blur:'3px'
  });
});