Как я могу реализовать градиент непрозрачности для нескольких выбираемых изображений в сетке/карусели?

давний слушатель, звонивший впервые.

У меня есть матрица значков, по которым можно перемещаться по горизонтали в карусели и по вертикали в виде категорий (которые представляют собой ряды значков), которые отсоединяются/добавляются, когда приложение циклически перемещается по категориям со стрелками вверх/вниз.

Я хочу, чтобы непрозрачность нижнего ряда значков исчезала (у меня черный фон) от исходных цветов значков до черного по мере продвижения сверху вниз, чтобы указать, что ниже есть последующие ряды. Единственный способ, которым я смог определить, как это сделать, — использовать background: -webkit-gradient, как указано здесь:

Прозрачность CSS3 + градиент

Я применяю это к DIV, который я накладываю над самой нижней строкой. К сожалению, я теряю кликабельность элементов за наложенным div. Однако я должен использовать наложение, потому что это свойство является фоновым свойством.

Есть ли другой способ реализовать непрозрачность градиента для ряда интерактивных значков, которые исчезают до черного, не жертвуя кликабельностью? Я не хочу, чтобы оверлей покрывал только нижние 25% или что-то еще... Мне нужно решение по принципу «все или ничего». Пока похоже, что "ничего" - мой единственный вариант.

Заранее большое спасибо.


javascript gradient jquery css opacity
person Kees Briggs    schedule 22.09.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Хм... приходят на ум два решения.

Во-первых, вы можете использовать наложение и отслеживать события мыши на этом элементе. Затем, с некоторой математикой, вы, вероятно, могли бы выяснить, какой базовый элемент использует jQuery для запуска щелчка этого элемента (т.е. $("#icon14").click(); ).

Второй вариант — нарисовать сопутствующий прозрачный div с каждым значком, который вы создаете в своей матрице. Поместите его точно в то же место, что и сам значок, но присвойте ему css z-index, который поместит его над оверлеем. Этот прозрачный div теперь может обрабатывать все события мыши для вас и по-прежнему находится над оверлеем.

Если вы пойдете по этому пути, я бы рассмотрел возможность использования функции .data(), которая позволяет быстро добавлять переменные к любому объекту jQuery. Вы можете установить этот сопутствующий div как свойство обычных значков в матрице с чем-то вроде $("#icon14").data('clickDiv', $("#icon14_click")); (хотя вы, вероятно, захотите назначить их в цикле или что-то в этом роде =)

Удачи!

person Chazbot    schedule 22.09.2011
comment
очень признателен. Я собираюсь попробовать второй вариант, так как я думаю, что он хорошо сочетается с тем, что у меня есть. Большое спасибо! - person Kees Briggs; 23.09.2011
comment
нет проблем. Подумав об этом подробнее, вы можете захотеть использовать data() по-другому; Вместо создания свойства clickDiv для значка создайте свойство myIcon для clickDiv. Таким образом, при нажатии вы можете просто сказать $(this).data('myIcon').click() - person Chazbot; 23.09.2011