一个好用的jQuery投影插件？

Question

在我的空闲时间里，我正在尝试学习JavaScript和jQuery。我通常在一个网站上进行实验。我想要实现一种模糊的阴影效果，当某个元素出现在页面上时。这样可以：

1. 使该元素看起来好像在页面上其他元素的上方。
2. 并将新元素变得重要而值得关注。

我该如何使用jQuery实现这个效果？在有些地方，他们建议使用“图像精灵”。但是我想避免为此目的打开Photoshop，因为 -

1. 我不想每次想要给某个新元素添加阴影效果时都要打开Photoshop。
2. 图像需要时间来加载。因此，当元素出现在页面上时，它需要时间来加载图像，而此时阴影效果就消失了。

此外，我听说CSS3内置了这种阴影效果。但是使用不同版本的浏览器存在差异，而IE*浏览器占多数。我希望在所有版本的IE浏览器中都能实现此效果。我应该如何尽可能统一地实现这种效果在大多数浏览器中呢？

- Srikar Appalaraju

Answer 1

有人在两年前就提出了完全相同的问题。所选答案是针对一个来自2007年的未维护的投影插件，但您可能还想查看其他答案。

虽然这是一种观点，但我认为CSS3是您最好的选择，可以为支持它的浏览器提供渐进增强。以下是在CSS3, Please!上显示的一组样本投影属性：

.box_shadow {
     -moz-box-shadow: 0px 0px 4px #333; 
  -webkit-box-shadow: 0px 0px 4px #333; 
          box-shadow: 0px 0px 4px #333; 
}

- Blackcoat

---

是的，我在发布这个问题之前看过那个链接。我放弃它主要是因为它是两年前提出的。自那时以来，有很多变化，而且我现在不想采用一个未维护的代码库。 - Srikar Appalaraju

但是IE怎么办？大多数人仍在使用IE。 - Srikar Appalaraju

IE9支持box-shadow属性。对于早期版本的IE，您需要使用神秘的blur滤镜。这大概是你能得到的最接近的效果：http://msdn.microsoft.com/en-us/library/ms532979(VS.85).aspx - Blackcoat

Answer 2

我已经在我的博客上写了一篇关于如何创建jQuery投影效果的文章。你可以在这里查看。该插件基本上会在需要添加投影效果的元素后面创建一个div来创建投影效果。在此处查看旧版本的演示。

现在，我已经修改了该插件，它现在使用CSS3为支持它的浏览器创建投影效果，对于不支持它的浏览器，使用相同的基于div的阴影。以下是代码：

/**
 * Drop Shadow Plugin jQuery
 * http://sarfraznawaz.wordpress.com/
 * Author: Sarfraz Ahmed ([e-mail])
 */

(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'
  });
});

- Sarfraz

Answer 3

http://plugins.jquery.com/project/DropShadow

这是一个相当不错的插件！

您可以在此处查看演示：

http://dropshadow.webvex.limebits.com/

- Trufa