Question

我正在尝试为视频扑克游戏创建效果，其中一张卡片在另一张卡片上滑动。

我认为JSFiddle非常简单。这是我的代码：

CSS：

body {
    width:80%;
}

#board {
    width:100%;
    height:25%;
}
div .card {
    width:16%;
    height:100px;
    display:inline-block;
}

div .redbox {
  width:100;
  height:100%;
  background-color:red;
}

div .bluebox {
  width:100;
  height:100%;
  background-color:blue;
}

HTML：

<body>
<div id="main">
        <div id="board">
            <div class="card" id="c-0">
                <div class="redbox"></div>
            </div>
            <div class="card" id="c-1">
                <div class="redbox"></div>
            </div>
            <div class="card" id="c-2">
                <div class="redbox"></div>
            </div>
            <div class="card" id="c-3">
                <div class="redbox"></div>
            </div>
            <div class="card" id="c-4">
                <div class="redbox"></div>
            </div>
        </div>
        <button>Click Here!</button>
    </div>
<body>

JS：

$('button').click(function (e) {
    for (var i = 0; i < 5; i++) {
        var $newDiv = $('<div>');
        $newDiv.addClass('bluebox');
        $newDiv.hide();
        $('#c-' + i).append($newDiv);
        $newDiv.slideToggle();
    }
});

我的两个问题如下：

我想将每张卡片的宽度设置为百分比，并自动调整高度。但是如果我删除“height”CSS属性，整个DIV就会消失。
我无法弄清楚如何在另一个上面制作一个div幻灯片。我不想删除底层的div，因为它将是一个通用的背景图像，当我在上面没有卡时我总是想要在那里。

我想也许我还应该注意到，最后我要将这些div元素更改为img元素，为了简单起见，我只是将它们设为彩色框。我不知道这是否会有所不同。

编辑：

第一个问题是难以纠正的问题。通过向.card元素添加“position：relative”和向images / colored box div元素添加“position：absolute”，我可以将新的元素添加到另一个元素之上。但是现在包含元素已经崩溃，我不知道如何让它扩展到其内容的大小。

新JSFiddle：

http://jsfiddle.net/yv3mwao9/

Answer 1

至于第二部分，你的答案是z-index css属性

（对于相同元素的子元素，更高的z-index将打印在其兄弟姐妹之上）

请注意，必须将位置css属性设置为相对或绝对值才能使z-index工作

Answer 2

添加到您的CSS：

#main {
    position: relative;
}

更改bluebox css

div .bluebox {
background-color:blue;
position: absolute;
top:0;
}

你的jquery：

$('button').click(function (e) {
    for (var i = 0; i < 5; i++) {
        var $newDiv = $('<div>');
        $newDiv.addClass('bluebox')
               .css({"width": $(".redbox").outerWidth(),
                     "height": $(".redbox").outerHeight()
                   });
        $newDiv.hide();
        $('#c-' + i).append($newDiv);
        $newDiv.slideToggle();
    }
});

动画用另一个div覆盖一个div

2 个答案: