Главная » Файлы » Прочие скрипты » 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 | |
Просмотров: 380 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |