Главная » Файлы » Прочие скрипты » 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. Изображения

Так же понадобятся несколько изображений (Все они находятся в прикреплённом архиве):



Всё! Рабочее демо, все необходимые скрипты и картинки находятся в прикреплённом архиве
Категория: jQuery | Добавил: Apocalypse | Теги: JQuery, смены, эффкты, кнопок, цвета, на, интересные
Просмотров: 266 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: