一個好的jQuery陰影插件？

在我的業餘時間，我試圖學習JavaScript & jQuery。我通常在網站上進行實驗。當某個元素出現在頁面上時，我想實現一種微弱的陰影效果。這給出 -一個好的jQuery陰影插件？

這看起來好像該元素高於頁面上的其他元素。
並使這個新元素看起來很重要。

我怎樣才能得到這個使用jQuery。在一些地方，他們建議使用「圖像精靈」。但我想避免爲此目的的圖像，因爲 -

我不想在每次我想要一個新的元素陰影效果打開Photoshop。
圖片需要時間加載。因此，一旦元素出現在頁面上，加載圖像需要時間，陰影效果錯覺消失了。

而且，我聽說有CSS3內置的這個陰影效果。但有不同的瀏覽器使用不同的版本。另外IE瀏覽器是大多數。我希望這可以在所有版本的IE中運行。我如何儘可能均勻地在大多數瀏覽器中獲得這種效果。

來源

2010-10-14 Srikar Appalaraju

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

這是一個相當不錯的插件！

你可以在這裏看到一個演示：

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

來源

2010-10-14 04:47:21 Trufa

其他人有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; 
}

來源

2010-10-14 04:42:58 Blackcoat

是的，我看了一下該鏈接之前，我張貼了這個問題。我放棄它主要是因爲它在兩年前被問到。自那時以來，Lot一直在變化，另外我不想在我的試驗中在這一點上採用無人管理的代碼庫。 – 2010-10-14 05:17:23

但是IE呢？大多數人仍然使用IE。 – 2010-10-14 05:24:39

IE9支持'box-shadow'屬性。對於早期版本的IE，您需要使用神祕的'blur'過濾器。這是關於最接近您可以：http://msdn.microsoft.com/en-us/library/ms532979(VS.85).aspx – Blackcoat 2010-10-14 05:26:00

我已經寫在我的關於如何創建jQuery的陰影效果博客的一篇文章。你可以check it out here。該插件基本上創建一個背後的元素被陰影以創建陰影效果。 See the demo of that old version here。

我現在已經修改了插件，它現在使用的陰影效果CSS3爲支持或不支持的瀏覽器相同的基於div的陰影的瀏覽器。下面是代碼：

/** 
* Drop Shadow Plugin jQuery 
* http://sarfraznawaz.wordpress.com/ 
* Author: Sarfraz Ahmed ([email protected]) 
*/ 

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

來源

2010-10-14 04:46:28 Sarfraz

一個好的jQuery陰影插件？

回答

相關問題