| Главная » Файлы » Прочие скрипты » jQuery |
Интересные эффкты смены цвета кнопок на jQuery
| 22.06.14, 20:21:22 | |
 Сейчас вы узнаете, как создавать интересные эффекты смены цвета кнопки при на ведении и нажатии на неё Для начала посмотрите ДЕМО Если демо вас устраивает - переходим к установке: Шаг 1. HTML Здесь приведен исходный код для всех 5 примеров. Используется неупорядоченный список, все они похожи друг на друга, только имеют разные атрибуты ‘id’. Код <ul id="ex1"> <li><a href="#">Кнопка 1</a></li> <li><a href="#">Кнопка 2</a></li> <li><a href="#">Кнопка 3</a></li> <li><a href="#">Кнопка 4</a></li> <li><a href="#">Кнопка 5</a></li> </ul> <ul id="ex2"> <li><a href="#">Кнопка 1</a></li> <li><a href="#">Кнопка 2</a></li> <li><a href="#">Кнопка 3</a></li> <li><a href="#">Кнопка 4</a></li> <li><a href="#">Кнопка 5</a></li> </ul> <ul id="ex3"> <li><a href="#">Кнопка 1</a></li> <li><a href="#">Кнопка 2</a></li> <li><a href="#">Кнопка 3</a></li> <li><a href="#">Кнопка 4</a></li> <li><a href="#">Кнопка 5</a></li> </ul> <ul id="ex4"> <li><a href="#">Кнопка 1</a></li> <li><a href="#">Кнопка 2</a></li> <li><a href="#">Кнопка 3</a></li> <li><a href="#">Кнопка 4</a></li> <li><a href="#">Кнопка 5</a></li> </ul> <ul id="ex5"> <li><a href="#">Кнопка 1</a></li> <li><a href="#">Кнопка 2</a></li> <li><a href="#">Кнопка 3</a></li> <li><a href="#">Кнопка 4</a></li> <li><a href="#">Кнопка 5</a></li> </ul> Шаг 2. CSS Код <style type="text/css"> h2 {padding-top:20px;clear:both;} ul {list-style:none;margin:0;padding:0;} li {float:left;width:100px;margin:0;padding:0;text-align:center;} li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;} li a:hover, li a:focus, li a:active {background-position:-150px 0;} li a {background:url(bg2.jpg) repeat 0 0;} #ex1 a {background:url(bg.jpg) repeat -20px 35px;} #ex2 a {background:url(bg2.jpg) repeat 0 0;} #ex3 a {background:url(bg3.jpg) repeat 0 0;} #ex4 a {background:url(bg4.jpg) repeat 0 0;} #ex5 a {background:url(bg4.jpg) repeat 0 0;} </style> Шаг 3. JQuery Код <script type="text/javascript"> $(function(){ $('#ex1 a') .css( {backgroundPosition: "-20px 35px"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){ $(this).css({backgroundPosition: "-20px 35px"}) }}) }) $('#ex2 a') .css( {backgroundPosition: "0 0"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){ $(this).css({backgroundPosition: "0 0"}) }}) }) $('#ex3 a') .css( {backgroundPosition: "0 0"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500}) }) $('#ex4 a') .css( {backgroundPosition: "0 0"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500}) }) $('#ex5 a') .css( {backgroundPosition: "0 0"} ) .click(function(){ $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:200}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500}) }) }); </script> Шаг 4. Изображения Так же понадобятся несколько изображений (Все они находятся в прикреплённом архиве):  Всё! Рабочее демо, все необходимые скрипты и картинки находятся в прикреплённом архиве | |
| Просмотров: 445 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |