Плавное изменение прозрачности изображений
Сегодня выкопал красивый эффект плавного изменения прозрачности изображений. Готов поделиться с вами. Сразу скажу, что скрипт не новый, а нашел я его у Tigir (там же смотрим и примеры работы). Что мне понравилось: простота подключения и управления скриптом.
Сейчас будем разбираться. Для начала, скрипт плавного изменения прозрачности изображений нужно скачать. Скачали? Отлично. Теперь будем его подключать и заставлять работать!
Во-первых подключим сам файл с исполняемым кодом в head-у страницы. Примерно так:
1 | <script type="text/javascript" src="/js/opacity.js"></script> |
Там же инициализируем функцию
1 2 3 | <script type="text/javascript"> fadeOpacity.addRule('oR1', .3, 1, 30); </script> |
Синтаксис: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDelay)
Аргументы:
- sRuleName – имя правила, задаётся произвольно;
- nStartOpacity и nFinishOpacity – начальная и конечная прозрачность, числа в диапазоне от 0.0 до 1.0 ;
- nDelay – задержка в миллисекундах (необязательный аргумент, по умолчанию равен 30).
Стиль картинки, у которой будем плавно менять прозрачность выглядит примерно так:
1 2 3 4 5 6 | img { filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } |
Сам вызов фейдинга прозрачности делаем через методы fadeOpacity(sElemId, sRuleName), где sElemId это id элемента, а sRuleName имя правила. Для возврата прозрачности в исходное состояние используется метод fadeOpacity.back(sElemId).
1 | <img id="fImg1" onMouseOver="fadeOpacity(this.id, 'oR1')" onmouseout="fadeOpacity.back(this.id)" src="/img/strawberry.jpg" width="100" height="80" /> |
И наслаждаемся результатом!
- Для наиболее требовательных веб-проектов отлично подойдет VDS в германии. И цены хорошие, и тех. параметры впечатляют
- Кто нибудь знает названия штатов США? Но только так, чтобы всех сразу? Никто?
