Попытка найти скрипт для изменения размера квадратов - есть предложения? - PullRequest
Новая
       1

Попытка найти скрипт для изменения размера квадратов - есть предложения?

0 голосов
/ 22 июля 2010

Мне нужен скрипт, желательно jquery, чтобы сделать следующее:

У меня ЧЕТЫРЕ КВАДРАТНЫХ КВАДРАТА (т. Е. Теги div), каждый из которых имеет свой цвет, вложенный в ОДНУ БОЛЬШУЮ КВАДРАТУ.

КОГДА Я НАПРАВЛЯЮСЯ НА ОДНУ МАЛЕНЬКУЮ КВАДРАТ, ОН УВЕЛИЧИВАЕТ И ПОКРЫВАЕТ ВСЕ ГНЕЗД. Когда я уберу мышь, увеличенный квадрат вернется к своему первоначальному размеру в гнезде.

Надеюсь, вы понимаете это.

Есть ли скрипт, который будет это делать?

Аналогичная идея анимации и изменения размера находится на сайте Sprint: текст ссылки

Но я хочу, чтобы анимация увеличенного квадрата покрывала три других квадрата в гнезде.

Большое спасибо всем.

Эрик

1 Ответ

1 голос
/ 22 июля 2010

Это должно делать то, что вы хотите:

HTML 

<div class="nest">
    <div class="square red"></div>  
    <div class="square blue"></div> 
    <div class="square green"></div> 
    <div class="square yellow"></div> 
</div>

CSS 

/* Creates the coordinate system for absolutely positioned squares */
.nest {
    position: relative;
    width: 200px;
    height: 200px;
}

.square {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
}

.red {
    top: 0;
    left: 0;
    background-color: red;
}

.blue {
    top: 0;
    left: 100px;
    background-color: blue;
}

.green {
    top: 100px;
    left: 0;
    background-color: green;
}

.yellow {
    top: 100px;
    left: 100px;
    background-color: yellow;
}

jQuery 

$('.square').each(function(){

    var origTop = $(this).offset().top;
    var origLeft = $(this).offset().left;

    $(this).hover(
        /* mouseover */
        function(){
            $(this).css({zIndex: 2});
            $(this).stop();
            $(this).animate({
                top: 0,
                left: 0,
                width: 200,
                height: 200
            });
        },
        /* mouseout */
        function(){
            $(this).stop();
            $(this).animate({
                top: origTop,
                left: origLeft,
                width: 100,
                height: 100
            }, function(){
                $(this).css({zIndex: 1});  
            });
        }
    );
});
...