Заработок в интернете и раскрутка вашего сайта Четверг, 28.03.2024, 14:52
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Создание сайта » HTML коды для uCoz » Плагин для увеличения фотографий при наведении на uCoz (Плагин для увеличения фотографий при наведении на uCoz)
Плагин для увеличения фотографий при наведении на uCoz
adminДата: Суббота, 21.12.2013, 14:58 | Сообщение # 1
Главный админ
Группа: Администраторы
Сообщений: 336
Награды: 0
Репутация: 1
Статус: Offline
Плагин для увеличения фотографий при наведении на uCoz

    Еще один легкий плагин можно положить в копилку "штучек" от Ucoz для вашего сайта. Речь идет об очень простом, легком, но эффектном плагине, позволяющем увеличивать изображения при наведении на них.

Плагин легко встраивается в код страницы и требует JQuery, как и подавляющее большинство продуктов компании Ucoz. Сам плагин создан на CSS, так что можно быть уверенным, что он действительно легкий и простой в установке. После установки, изображения отлично реагируют на мышь, не просто увеличиваясь-уменьшаясь при наведении, а делая это с некоторыми эффектами. Например, если быстро перемещать мышь можно увидеть, как картинки буквально танцуют на страничке. Может для кого-то это и ничего особенного, но довольно красивый и интересный эффект привлек нас и увлек несколько минут поиграть. Вообще при быстром обращении с мышкой, картинка еще некоторое время совершает колебания - как бы подпрыгивает на месте.

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

Установка:

 После /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>



data-yashareType="button" data-

yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus">
 

Нравится







Форум » Создание сайта » HTML коды для uCoz » Плагин для увеличения фотографий при наведении на uCoz (Плагин для увеличения фотографий при наведении на uCoz)
  • Страница 1 из 1
  • 1
Поиск:

Заработок в интернете и продвижение вашего сайта © 2013-2024
Копирование материалов сайта без согласия запрещено!

Яндекс.Метрика

СЕГОДНЯ НАС ПОСЕТИЛИ:

200