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>
charset="utf-8"> data-yashareType="button" data-
yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus">
|
|
| |