0

ユーザーが3つのdiv内の文字の1つをクリックすると、そのdivのサイズが変更され、画面上の他の2つのdivが「覆われる」ページを設定しようとしていますが、jqueryステートメントでレンガの壁にぶつかりました-サイズ変更機能（およびおそらく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);
    });
});

フィドル

サイズ変更はあなたが考えているものではありません。ユーザーがウィンドウ要素のサイズを変更したときに発生するイベントです。

/変更に合わせて編集 /アニメーション用に再度編集

于 2013-08-12T22:59:16.267 に答える