Блоки, меняющие прозрачность при наведении курсора

Скрипты

Рисунок Блоки, меняющие прозрачность при наведении курсора
Блоки, меняющие прозрачность при наведении курсора Блоки, меняющие прозрачность при наведении курсора
оценка: 4.2 из 5
оценок: 54, отзывов: 17

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

Эффект меняющейся прозрачности создается скриптом, найденным по частям в сети, собранным и исправленным нашими программистами. Скрипт прост в использовании. Для Вас не составит труда установить его на Ваш сайт и настроить.

Итак, установка. Впишите в коде, желательно в теле HEAD, следующую строку:

Code
<script type="text/javascript" src="http://szenprogs.ru/scripts/FadeBlock.js"></script>

Этой строкой мы подключили модуль, который и управляет эффектом. Если желаете, можете скопировать этот модуль на свой хост. В этом случае, в строке, описанной выше, замените адрес на свой.

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

Code
<script type="text/javascript"><!--
  FadeInit(['fBlock'],0,0.4,0.1);
--></script>

Внимание! Код вызова нужно прописать в конце страницы (перед тегом BODY). В крайнем случае, после блоков, на которые эффект нужно повесить. Это нужно для того, чтобы функция смогла назначить события на блоки. А блоки эти должны быть уже созданы до выполнения функции.

Параметры функции:

  • Первый параметр - список классов блоков, на которые эффект должен распространяться. Например, если класс блоков cl1 и cl2, то в параметр нужно вписать: ['cl1','cl2'].
  • Второй параметр - направление эффекта. 0 - стандартное положение прозрачный, а при наведении курсора непрозрачный. 1 - стандартное положение непрозрачный, а при наведении курсора прозрачный.
  • Третий параметр - уровень прозрачности. Значение от 0 (полная прозрачность) до 1 (полная непрозрачность).
  • Четвертый параметр - скорость эффекта. Значение от 1 (эффект не происходит) до значение больше нуля. Нулевое значение устанавливать нельзя. Это придаст эффекту бесконечность и зацикливание.

Все, устанавливаете код на свою страницу, настраиваете, как Вам надо, и используете.

Удачи вам!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Блоки, меняющие прозрачность при наведении курсора
Скрипты
Скрипты, инструкции, справочники

rss
Категория:Скрипты
Просмотрено:16484
Рейтинг:4.2/54
Дата добавления:2009-08-07 14:22, Пятница
Добавил:Szen
Теги:Блок, JavaScript, полупрозрачный

Мини-форум

1-10 11-17
№ 02009-08-07 14:22
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Блоки, меняющие прозрачность при наведении курсора".
Гость
№ 1
2009-09-28 19:41 Спам
bigben
Аватар участника 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>
cool
Андрей · WWW
№ 2
2009-09-28 19:50 Спам
Szen
Аватар участника Szen
bigben, ваш метод не обеспечивает плавное изменение прозрачности. А для резкого изменения - в самый раз.
Szen · WWW
№ 3
2009-12-01 17:37 Спам
wangog
Аватар участника wangog
Вот и нашёл то что искал ! Автору СПАСИБА !
Алексей · WWW
№ 4
2009-12-15 19:52 Спам
Gambit
Аватар участника Gambit
Szen, опять обращаюсь за помощью..)
поставил скрипт..
а именно создал эффект для копирайта Ucoz..
(на сайте у меня снизу слева..)
работает отлично, но на таких страницах как например "форум" или "FAQ" копирайт отображается без эффекта прозрачности..
на страницах созданных мною все нормально..
Vlad.. Gambit..™ · WWW
№ 5
2009-12-15 20:03 Спам
Szen
Аватар участника Szen
Gambit, вы на форуме не подключили предлагаемый скрипт. В FAQ скрипт тоже отсутствует.
Скрипт нужно подключать на всех страницах, на которых он должен работать.
Szen · WWW
№ 6
2009-12-20 21:55 Спам
Клаус
Аватар участника Клаус
Замечательный скрипт, спс автору !
Санек · WWW
№ 7
2010-01-03 22:02 Спам
danila00
Аватар участника danila00
Спасибо автору! Подскажите, назначаю стандартное положение непрозрачное, в эксплорере прозрачным не становится. В опере и хроме работает.
dima
№ 8
2010-01-04 17:36 Спам
Szen
Аватар участника Szen
danila00, в IE до версии 6 включительно есть такой баг. Он не исправляется. В ближайшем будущем будет сделан скрипт, который будет работать независимо от браузера. Чуть подождите. smile
Szen · WWW
№ 9
2010-03-13 15:11 Спам
kick
Аватар участника kick
Чет никак не могу сообразить как он прикрепляется? Нужно класс прописывать или как? Можно на одном примере хотя бы посмотреть,а то я что-то ничего из кода вашей страницы не понял)))
Роман
№ 10
2010-03-13 17:59 Спам
kick
Аватар участника kick
Чет нифига у меня не работает(((
Роман
1-10 11-17
Учавствовать в обсуждении "Блоки, меняющие прозрачность при наведении курсора" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Какой JavaScript фреймворк вы изпользуете?
Всего ответов: 143
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 3
Гостей: 3
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz