Исчезать края div с помощью jQuery - PullRequest
14 голосов
/ 16 августа 2010

Как я могу затушевать края div с помощью jQuery?Подумайте о карусели с изображениями внутри, которые скользят горизонтально.Как я могу затемнить левую и правую стороны так, чтобы изображения вблизи краев постепенно исчезали.

Надеюсь, это ясно.:)

Ответы [ 6 ]

19 голосов
/ 21 сентября 2011

Браузеры Webkit (т.е. Chrome и Safari) поддерживают свойство CSS с именем -webkit-mask, которое позволяет накладывать элемент с эффектом CSS3 (т.е. линейным градиентом).

Следующее правило таблицы стилей будет применять исчезающий белый край к элементам с классом .mask:

 .mask {
     -webkit-mask: -webkit-linear-gradient(
          left,
         rgba(255,255,255,0),
         rgba(255,255,255,1) 5%,
         rgba(255,255,255,1) 95%,
         rgba(255,255,255,0)
     );
 }

К сожалению, это будет только работать в браузерах на основе webkit. Если вы хотите поддерживать все остальное (что вы, вероятно, делаете), вам лучше всего использовать прозрачные PNG.

4 голосов
/ 20 декабря 2011

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

для вставки: (вам нужно будет сделать оверлей выше контейнера для изображений, но с той же шириной, и переместить его поверх, если он будет одинаковой высоты, тень появится со всех сторон)

#container_overlay{
   box-shadow: inset 0px 0px 10px 10px white;
   z-index:5;// higher than the container with the images
}

для элемента на любом конце, используйте обычную тень блока.

#end_overlay{
    width:2px;
    box-shadow: 0px 0px 10px 10px white;
    z-index:5;// higher than the container with the images
}

с плавающей точкой влево или вправо, и он должен работать в любом браузере, который понимает наложение, а любой без наложения игнорирует его. Я не думаю, что вам нужно что-то внутри, так что это будет невидимый объект, из которого выплескивается тень.

Я видел, как это использовалось для изменения верхней и нижней области нескольких журнальных приложений, поэтому текст выглядит так, как будто он исчезает, когда покидает страницу.

1 голос
/ 30 августа 2011

Я думаю, это может быть то, что вы ищете: http://hunyadi.info.hu/en/projects/sigplus/testsuite/30-sigplus-sliders

Rich

1 голос
/ 17 июня 2011

Вы можете использовать его, чтобы установить несколько делений с уменьшением прозрачности и поместить их в маску над элементом, который хотите исчезнуть, как описано здесь: http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm

0 голосов
/ 27 апреля 2011

Как сказал Алекс, самый простой способ - это наложить что-то, чтобы затемнить основной элемент.Однако я бы просто использовал прозрачный градиент png.

Это не будет легко работать в IE6, но всегда есть способ (лично я больше не поддерживаю IE6):

http://24ways.org/2007/supersleight-transparent-png-in-ie6

0 голосов
/ 16 августа 2010

Легким способом может быть отображение набора элементов div по краям, например, вертикальных полос с различными уровнями непрозрачности, создавая впечатление исчезающего изображения.

...