0

我正在尝试设置一个页面，当用户单击 3 个 div 中的一个字母时，该 div 会调整大小并“覆盖”屏幕上的其他两个 div - 但我用 jquery 语句撞到了砖墙- 我知道它涉及 resize 函数（可能还有 css 函数），但我一生都无法弄清楚该怎么做。

HTML/CSS

<div class="container">
    <div id="home" class="group">   <span class="lettering" id="A">
            A
            </span>

    </div>
    <div id="portfolio" class="group" style="margin-left: -4px;">   <span class="lettering" id="P">
            P
            </span>

    </div>
    <div id="contact" class="group" style="margin-left: -4px;"> <span class="lettering" id="C">
            C
            </span>

    </div>
</div>

html, body {
    font-size: 1em;
    background: #fff;
    height: 100%;
}
.container {
    width: 100%;
    height: 100%;
}
#home {
    background-color: #4D90FE;
}
.group {
    height: 100%;
    text-align: center;
    position: relative;
    display: inline-block;
}
#portfolio {
    background-color: #DD4B39;
}
#contact {
    background-color: #777777;
}
.lettering {
    color: #fff;
    font: bolder 7em'Bitter Bold';
    vertical-align: middle;
    position: relative;
}

jQuery

jQuery(document).ready(function () {
    /*------------------------
    Set Divs to 1/3 Width of Screen
    ------------------------*/
    $(".group").css("width", ($(window).width() * 1 / 3));
    $(window).resize(function () {
        $(".group").css('height', $(window).height());
        $(".group").css("width", ($(window).width() * 1 / 3));
    });
    /*------------------------
    Vertically Center Div
    ------------------------*/
    $('.lettering').css("top", ($('.group').height() - $('.lettering').height()) / 2);
    /*-----------------------
    Expand Div on Element Click
    -----------------------*/
    $('.lettering').click(function () {
        $(this).parent().resize(function () {
            /* ??? */
        });
    });
});

http://jsfiddle.net/qg8Zd/

4

1 回答 1

1

将所有 div 定位为绝对位置，并更改已单击的 div：

jQuery(document).ready(function () {
    $(".group").each(function(index, element)
    {
        var len = $(".group").length;
        //console.log((100 / len * index) + "%");
        $(element).css("left", (100 / len * index) + "%");
    });

    $('.lettering').click(function ()
    {
        $(this).parent().animate({ width: "100%", left: 0 }, 500).css("z-index", 1);
    });
});

小提琴

Resize不是你想的那样，它是当用户改变窗口元素大小时触发的事件。

/编辑以适应变化 /再次编辑动画

于 2013-08-12T22:59:16.267 回答