Question

我需要一个脚本，最好是jquery来完成以下操作：

我有四个小方块（即div标签），每个颜色都嵌套在一起，形成一个大的SQAURE。

当我抱着一个小方块时，它会扩大并覆盖整个巢穴。当我移开鼠标时，放大的sqaure将在巢中恢复到原来的大小。

我希望你明白这一点。

是否有可以执行此操作的脚本？

Sprint网站上有类似的动画和调整大小的想法： link text

但是我希望放大的方块的动画能够覆盖巢中的其他三个方块。

非常感谢大家。

埃里克

Answer 1

这应该做你想要的：

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});  
            });
        }
    );
});

试图找到一个重新调整正方形大小的脚本 - 有什么建议吗？

1 个答案: