Question

在业余时间我正在尝试学习javascript＆amp; jQuery的。我一般在网站上试验。当页面上出现一些元素时，我想实现一个微弱的阴影效果。这给了 -

这看起来好像元素位于页面上的其他元素之上。
并使这个新元素看起来很重要。

如何使用jQuery实现此目的。在某些地方，他们建议使用“图像精灵”。但我想为此目的避免使用图像，因为 -

每次我想要一些新元素的阴影效果时，我都不想打开photoshop。
图片需要一段时间才能加载。因此，只要元素出现在页面上，加载图像和图像就需要时间。那时阴影效应幻觉消失了。

另外，我听说CSS3内置了这个阴影效果。但是有不同的浏览器使用不同的版本。加上IE *浏览器占多数。我希望这适用于所有版本的IE。如何在大多数浏览器中尽可能均匀地获得此效果。

Answer 1

其他人两年前就有exact same question ~~就在另一周~~。所选答案是从2007年开始的unmaintained drop shadow plugin，但您也可以查看其他答案。

虽然这是一个意见问题，但我相信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; 
}

Answer 2

我已经在我的博客上写了一篇关于如何创建jQuery投影效果的帖子。你可以check it out here。该插件基本上会在这些元素后面创建一个div，以便创建阴影效果。 See the demo of that old version here

我现在修改了插件，它现在使用 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);

以下是如何使用它：

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

Answer 3

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

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

你可以在这里看到一个演示：

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

一个好的jQuery投影插件？

3 个答案: