Блоки, меняющие прозрачность при наведении курсора
Этот скрипт создаст на выбранных вами блоках сайта эффект прозрачности, степень которыой будет плавно меняться при наведении курсора на блок. В качастве блока может выступать любой элемент страницы, будь то DIV, рисунок, информер, баннер, ссылка...
Эффект меняющейся прозрачности создается скриптом, найденным по частям в сети, собранным и исправленным нашими программистами. Скрипт прост в использовании. Для Вас не составит труда установить его на Ваш сайт и настроить.
Итак, установка. Впишите в коде, желательно в теле HEAD, следующую строку:
Этой строкой мы подключили модуль, который и управляет эффектом. Если желаете, можете скопировать этот модуль на свой хост. В этом случае, в строке, описанной выше, замените адрес на свой.
После этого нужно прописать код вызова функции, которая назначит прозрачность и эффект ее изменения к обработчику событий нужных блоков. Код выглядит так:
FadeInit(['fBlock'],0,0.4,0.1);
--></script>
Внимание! Код вызова нужно прописать в конце страницы (перед тегом BODY). В крайнем случае, после блоков, на которые эффект нужно повесить. Это нужно для того, чтобы функция смогла назначить события на блоки. А блоки эти должны быть уже созданы до выполнения функции.
Параметры функции:
- Первый параметр - список классов блоков, на которые эффект должен распространяться. Например, если класс блоков cl1 и cl2, то в параметр нужно вписать: ['cl1','cl2'].
- Второй параметр - направление эффекта. 0 - стандартное положение прозрачный, а при наведении курсора непрозрачный. 1 - стандартное положение непрозрачный, а при наведении курсора прозрачный.
- Третий параметр - уровень прозрачности. Значение от 0 (полная прозрачность) до 1 (полная непрозрачность).
- Четвертый параметр - скорость эффекта. Значение от 1 (эффект не происходит) до значение больше нуля. Нулевое значение устанавливать нельзя. Это придаст эффекту бесконечность и зацикливание.
Все, устанавливаете код на свою страницу, настраиваете, как Вам надо, и используете.
Удачи вам!
| Категория: | Скрипты |
| Просмотрено: | 3351 |
| Рейтинг: | 4.2/16 |
| Дата добавления: | 07.08.2009 14:22, Пятница |
| Добавил: | Szen |
| Теги: | Блок, JavaScript, полупрозрачный |
Рекомендуем
Дополнительно
Мини-форум
| № 0 | Пятница, 07.08.2009 14:22 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Блоки, меняющие прозрачность при наведении курсора". |
| Профиль |
| № 1 | Понедельник, 28.09.2009 19:41 |
bigben | Вставляем это в самый низ в CSS шаблоне: Code /* ----////// Эффект прозрачности /////------- */ #banners a img { opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40); } #banners a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); } Теперь заключаем счётчик или любое изображение в код: Code <div id="banners">Тут ваши счётчики, кликабельные картинки</div>  |
| ПрофильWWW |
| № 2 | Понедельник, 28.09.2009 19:50 |
| Szen | bigben, ваш метод не обеспечивает плавное изменение прозрачности. А для резкого изменения - в самый раз. |
| ПрофильWWW |
| № 4 | Вторник, 15.12.2009 19:52 |
Gambit | Szen, опять обращаюсь за помощью..) поставил скрипт.. а именно создал эффект для копирайта Ucoz.. (на сайте у меня снизу слева..) работает отлично, но на таких страницах как например "форум" или "FAQ" копирайт отображается без эффекта прозрачности.. на страницах созданных мною все нормально.. |
| ПрофильWWW |
| № 5 | Вторник, 15.12.2009 20:03 |
| Szen | Gambit, вы на форуме не подключили предлагаемый скрипт. В FAQ скрипт тоже отсутствует. Скрипт нужно подключать на всех страницах, на которых он должен работать. |
| ПрофильWWW |
| № 7 | Воскресенье, 03.01.2010 22:02 |
| danila00 | Спасибо автору! Подскажите, назначаю стандартное положение непрозрачное, в эксплорере прозрачным не становится. В опере и хроме работает. |
| Профиль |
| № 8 | Понедельник, 04.01.2010 17:36 |
| Szen | danila00, в IE до версии 6 включительно есть такой баг. Он не исправляется. В ближайшем будущем будет сделан скрипт, который будет работать независимо от браузера. Чуть подождите.  |
| ПрофильWWW |
| № 9 | Суббота, 13.03.2010 15:11 |
kick | Чет никак не могу сообразить как он прикрепляется? Нужно класс прописывать или как? Можно на одном примере хотя бы посмотреть,а то я что-то ничего из кода вашей страницы не понял))) |
| Профиль |
| № 10 | Суббота, 13.03.2010 16:55 |
| kick | Тоесть вот этого будет достаточно? <p style="opacity: 0.4;" class="fBlock">......</p> А если я сам скрипт пропишу в страницах сайта, а вышеуказанную строчку буду прописывать в глобальном блоке скрипт будет работать? |
| Профиль |
Внимание
Все скрипты, инструкции, тесты, статьи и подборки, опубликованные в блоге портала, являются собственностью портала. Администрация портала не несет никакой ответственности за содержания статей и скриптов, но обязуется не публиковать материалы, нарушающие законодательство Российской Федерации, порнографию, инструкции по взлому и вскрытию. Администрация портала сама решает, кому помогать в решении какой-либо проблемы, а кому отказать в помощи. Цитируя наш текст и устанавливая опубликованные скрипты, вы соглашаетесь с тем, что используете продукт, созданный или подготовленный порталом SzenProgs. Портал SzenProgs оставляет за собой право менять инструкции, тесты, записи, подборки и скрипты по своему усмотрению и менять содержимое файлов, залитых на портале.
Любая, полная или частичная, публикация материала, размещенного в блоге портала SzenProgs, на другом стороннем от портала SzenProgs сайте должна сопровождаться ссылкой на источник.
(SMS):
(WebMoney):
Kimblejcjqzz(40), denisbardas(15), stisurneybrit(49), faremiamume(46), NiteNearianep(40), Dik0n(24).
Желаем им счастья, здоровья, благополучия, любви и богатства!
С уважением, администрация сайта.
