js Увеличение изображения при наведении курсора 

Дата публикации  Дата изменения11.01.13  Комментарии2   Просмотры12543

Курсы

Код скрипта:


$(document).ready(function() { var cont_left = $("#container").position().left; $("a img").hover(function() { // приближение $(this).parent().parent().css("z-index", 1); $(this).animate({ height: "250", width: "250", left: "-=50", top: "-=50" }, "fast"); }, function() { // отдаление $(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"); }); });

И код css :


#container{
text-align: center;
position: absolute;
left: 240px;
margin-top: 150px;
width: 790px;
}
.img{
position: fixed;
z-index: 0;
}
.end{
margin-right: 0;
}
.clear{
clear: both;
}
.img a img{
position: relative;
border: 0 solid #fff;
}

Смотреть пример

  Размер:  492,47kB | Изменен:  8.01.13 | Загрузок: 635
Бесплатные курсы

Категории

Теги: , , , , ,

Оцените материал:

Рейтинг: 9.5/10 (2)


КомментарииКомментарии:

    artur737

     

    доброго времени суток. поделитесь пожалуйста информацией, как сделать такую же ракету на блоге (WordPress).

    coder.hol.es /* Админ */

     

    Здравствуйте! Это скрипт js, встраиваемый на любой сайт. В известном скрипте "мухи на экране" изображения мухи заменены на ракету. Сам скрипт можно взять) с исходного кода этого сайта.


 

Старые →← Новые