Плавное изменение цвета текста, фона и обводки при наведении - ForumOpen.Org.Ru Самый большой форум в России
Мини-профиль
Воскресенье
10.11.2024
22:20

[ Управление профилем ]


Мини-чат
300


Наш опрос
Какой браузер лучше ?
Всего ответов: 20


Оптимизация
Сайт оптимизирован почти под все современные Интернет-браузеры:

warp37

warp37

warp37



Статистика


Приветствую Вас, Гость · RSS 10.11.2024, 22:20
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

  • Страница 1 из 1
  • 1
Плавное изменение цвета текста, фона и обводки при наведении
KadilakДата: Вторник, 15.02.2011, 13:01 | Сообщение # 1
Генерал-майор
Группа: Администратор
Сообщений: 447
Награды: 0
Репутация: 93
Статус:

Интересный плагин, который позволит вам плавно изменять цвет текста, фона под текстом и обводки вокруг текста

Установка:

После /head на страницах, где будет использован данный плагин, вставляйте:

Code
<script type="text/javascript" src="/js/jquery.color.js" ></script>

Следующий код вставляйте сразу после предыдущего:

Code
<script type="text/javascript">  
jQuery(document).ready(function(){  

jQuery(".text").mouseover(  
function () {  
jQuery(this).animate({  
color:"#ff0000"  
}, 500 );  
});  

jQuery(".text").mouseout(function() {  
jQuery(this).animate({  
color:"#000"  
}, 500 );  
});  

});  
</script>

Немного разберём настройки:

.text - класс, к кторорому будет применяться эффект
mouseover, mouseout - функция при наведении/отведении курсора (выполнение скрипта при этих условиях)
color - к какому элементу будет выполняться эффект (backgroundColor - цвет фона; color - цвет текста; outlineColor - цвет обводки; borderBottomColor, borderLeftColor, borderRightColor, borderTopColor - цвет пунктирной обводки [низ, лево, право, верх] )

#ff0000 - цвет текста при наведении курсора
#000 - цвет текста при отведении курсора
500 - скорость смены цвета

Текст, к которому будет применяться эффект, прописывается так:

Code
<span class="text">Меняем цвет текста при наведении мыши</span>

Осталось лишь залить скрипт из прикреплённого архива в папку js

Материал подготовлен Apocalypse





 
  • Страница 1 из 1
  • 1
Поиск: