Главная » Файлы » Прочие скрипты » jQuery

Простой плагин увеличения картинок при наведении на jQuery и CSS для uCoz
24.06.14, 16:34:14



Очень лёгкий плагин, который позволит увеличивать картинки при наведении

Для начала посмотрите ДЕМО

Моё тестирование в фидле: ДЕМО

Установка:

После /head на нужных страницах:
Код
<script>  
  $(document).ready(function () {  
  var cont_left = $("#container").position().left;  
  $("a img").hover(function () {  
  // hover in  
  $(this).parent().parent().css("z-index", 1);  
  $(this).animate({  
  height: "250",  
  width: "250",  
  left: "-=50",  
  top: "-=50"  
  }, "fast");  
  }, function () {  
  // hover out  
  $(this).parent().parent().css("z-index", 0);  
  $(this).animate({  
  height: "150",  
  width: "150",  
  left: "+=50",  
  top: "+=50"  
  }, "fast");  
  });  

  $(".img").each(function (index) {  
  var left = (index * 160) + cont_left;  
  $(this).css("left", left + "px");  
  });  
  });  
  </script>

Следующий код в самый низ вашего css:
Код
#main {  
  background: #0099cc;  
  margin-top: 0;  
  padding: 2px 0 4px 0;  
  text-align: center;  
  }  
  #main a {  
  color: #ffffff;  
  text-decoration: none;  
  font-size: 12px;  
  font-weight: bold;  
  font-family: Arial;  
  }  
  #main a:hover {  
  text-decoration: underline;  
  }  
  #container {  
  text-align: center;  
  position: absolute;  
  width: 790px;  
  }  
  .img {  
  position: fixed;  
  z-index: 0;  
  }  
  .end {  
  margin-right: 0;  
  }  
  .clear {  
  clear: both;  
  }  
  .img a img {  
  position: relative;  
  border: 0 solid #fff;  
  }

Картинки оформляем следующим образом:
Код
<div id="container">  
  <div class="img"><a href="#"><img src="Ссылка на картинку"/></a></div>  
  <div class="img"><a href="#"><img src="Ссылка на картинку"/></a></div>  
  <div class="img"><a href="#"><img src="Ссылка на картинку"/></a></div>  
  <div class="img"><a href="#"><img src="Ссылка на картинку"/></a></div>  
  <div class="img"><a href="#"><img src="Ссылка на картинку"/></a></div>  
  <div class="img"><a href="#"><img src="Ссылка на картинку"/></a></div>  
  <div class="clear"></div>  
  </div>

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

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