javascript - Html/css/js div 拆分到块 jsfiddle 下

Question

我如何获得像图像一样的中间块（它说：“你好”的块）：

它是 怎样的：我想要它：

jsfiddle + 脚本：http: //jsfiddle.net/mWmsU/

html:

<div id="container">
<div class="overlay"></div>
    <div class="btnbar">
        <div class="btn" id="it1"><div class="btnp" id="txt"></div><h2>Knopje 1</h2></div>
        <div class="btn" id="it2"><div class="btnp"></div><h2>Knopje 2</h2></div>
        <div class="btn" id="it3"><div class="btnp"></div><h2>Knopje 3</h2></div>
        <div class="btn" id="it4"><div class="btnp"></div><h2>Knopje 4</h2></div>
        <div class="btn" id="it5"><div class="btnp"></div><h2>Knopje 5</h2></div>
        <div class="btn" id="it6"><div class="btnp"></div><h2>Knopje 6</h2></div>
        <div class="btn" id="it7"><div class="btnp"></div><h2>Knopje 7</h2></div>
    </div>
    <div class="largebar">
        <div class="pointer"></div>
        <div class="largebarcontent">
            <h1 id="title">Hallo</h1>
        </div>
    </div>
</div>

它应该有点像 ios 主屏幕

Answer 1

使用这个...并查看演示的 HTML 和 CSS...

$(function(){
    var currentItem;
    var plusLeft;
    $(window).bind("resize", resizeWindow);
    resizeWindow();
//              $(".overlay.largeOpen").css("height", $("body").height());

    $(".btn").click(openItem);
    $(".overlay").click(function(){
        $(currentItem).css("z-index", 9);
        $(".row").css("padding-bottom", 0);
        $("#"+currentItem.id + " h2").css("visibility", "visible");
        $("#container, .overlay").toggleClass("largeOpen");
        $(".btn").click(openItem);
    });
    $("#txt").text(window.innerWidth);

    function openItem(){
        currentItem = this;
        $('html,body').animate({
            scrollTop: $(this).position().top
        }, 700);
        $("#container").toggleClass("largeOpen");
        $(this).parent().css("padding-bottom", 100);
        $(".pointer").css("left", $(this).position().left+plusLeft);
        $(".largebar").css("top", $(this).position().top+117);
        $(this).css("padding-button", "117px");
        $(this).css("z-index", 101);
        $("#"+currentItem.id + " h2").css("visibility", "hidden");
//                  console.log($(this).css('z-index') == 10);
        $(".btn").unbind('click');
    }

    function resizeWindow(e) {
        if(currentItem){
            $(".pointer").css("left", $("#"+currentItem.id).position().left+plusLeft);
            $(".largebar").css("top", $("#"+currentItem.id).position().top+117);
        }
        $(".overlay.largeOpen").css("height", $("body").height());
        if(window.innerWidth <= 320) plusLeft = 9;
        if(window.innerWidth > 320) plusLeft = 20;
    }
});

看看这个DEMO