0

Хочу сделать несколько картинок каскадом, слева направо как ссылки. Каждая картинка накладывается друг на друга примерно на половину. примерно вот так:

<style type="text/css">
.k1 {position: absolute;
width: 286px;
height: 279px;
background: transparent url('1.jpg') center center no-repeat;}
.k2 {position: absolute;
width: 286px;
height: 279px;
background: transparent url('2.jpg') center center no-repeat;
left:15%;}
.k3 {position: absolute;
width: 286px;
height: 279px;
background: transparent url('3.jpg') center center no-repeat;
left:30%;}
</style>
<div class="k1"></div>
<div class="k2"></div>
<div class="k3"></div>

и т.д.

Но тут возникает вопрос, как их "оживить" при наведении?

1

2 ответа 2

4

<div class="k1" onmouseenter="k_a:start(this);" onmouseover="k_a:end(this);"></div>

Убейте меня ... конечно выигрыш в нагрузке, но на таких мелочах лучше так:

<div class="elem"></div>

$('.elem').on({
        'mouseenter': function () {
            $(this).animate({/* */});
        },
        'mouseleave': function () {
            $(this).animate({/* */});
        }
    });
2

Добавь всем один ещё один класс или id или навесь событие. Я люблю навешивать инлайново =)

<div class="k1" onmouseenter="k_a:start(this);" onmouseover="k_a:end(this);"></div>
<div class="k2" onmouseenter="k_a:start(this);" onmouseover="k_a:end(this);"></div>
<div class="k3" onmouseenter="k_a:start(this);" onmouseover="k_a:end(this);"></div>

Затем пиши функцию в js

Самая простая анимация при наведении приподнимем вверх, потом опустим.

var k_a = {
    start:function(elem){
        elem.animate({ marginTop: "-10px", z-index: 1000; }, 200);
    },
    end:function(elem){
        elem.animate({ marginTop: 0, z-index: 0}, 200);
   }
}

Смотри больше в гугле =)

.animate() JQuery API Documentation

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.