Хороший плагин jQuery drop shadow? - PullRequest
Новая
       7

Хороший плагин jQuery drop shadow?

3 голосов
/ 14 октября 2010

В свободное время я пытаюсь выучить javascript и jQuery.Я вообще экспериментирую на сайте.Я хочу добиться слабого эффекта тени, когда какой-то элемент появляется на странице.Это дает -

  1. Это выглядит так, как будто элемент находится над другими элементами на странице.
  2. , и делает этот новый элемент чем-то важным, чтобы на него смотреть.

Как я могу получить это с помощью jQuery.В некоторых местах они предлагали использовать «спрайты изображений».Но я хочу избегать изображений для этой цели, потому что -

  1. Я не хочу открывать фотошоп каждый раз, когда я хочу эффект тени для какого-то нового элемента.
  2. Изображения снимаютсявремя для загрузки.Следовательно, как только элемент появляется на странице, для загрузки изображений требуется время, и к тому времени иллюзия эффекта тени исчезает.

Кроме того, я слышал, что в CSS3 встроен этот эффект тенив.Но есть разные браузеры, использующие разные версии.Плюс браузеры IE * составляют большинство.Я хочу, чтобы это работало во всех версиях IE.Как можно получить этот эффект в большинстве браузеров настолько равномерно, насколько это возможно.

Ответы [ 3 ]

7 голосов
/ 14 октября 2010

У кого-то еще был точно такой же вопрос как раз на прошлой неделе два года назад.Выбранный ответ был для необслуживаемого плагина для тени с 2007 года, но вы можете посмотреть и на другие ответы.

Хотя это вопрос мнения, я считаю, чтоCSS3 - ваш лучший выбор, предоставляющий прогрессивное улучшение для тех браузеров, которые его поддерживают.Вот пример набора свойств drophadow, как показано на CSS3, пожалуйста! : 

.box_shadow {
     -moz-box-shadow: 0px 0px 4px #333; 
  -webkit-box-shadow: 0px 0px 4px #333; 
          box-shadow: 0px 0px 4px #333; 
}
2 голосов
/ 14 октября 2010

Я уже написал пост в своем блоге о том, как создать эффект отбрасывания 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);

Вот как его использовать: 

$(window).load(function(){
  $('.shadow').dropshadow({
    shadowColor: '#cccccc',
    shadowLayer: -100,
    distance:'6px',
    blur:'3px'
  });
});
0 голосов
/ 14 октября 2010

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

Это довольно хороший плагин!

Вы можете увидеть демо здесь:

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

...