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

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

Курсы

Код скрипта:



$(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 | Загрузок: 636
Бесплатные курсы

Категории: 

Теги: , , , , ,

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

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

Схожие по тегам статьи

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

    artur737

     

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

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

     

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

 

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