javascript - 动态网格 - 显示内联 block

Question

到目前为止，我已经设法编写了几个方 block 的代码，当我悬停时每个方 block 都有翻转动画，当它被点击时它会有一个弹出模式窗口。

我有两个问题: 1) 我如何显示这些方 block ，以便它跨越页面 10x10 (内联 block )尝试将显示内联 block 放在面板上但没有工作

拥有这样的东西:

2) 将来网格的数量会增加到 30x10。有没有办法动态绘制这些正方形，JS 函数？

任何帮助/建议将不胜感激

Answer 1

1) 将 inline-block 添加到 .trigger 类应该有你想要的效果，例如:

.trigger {
    display: inline-block;
    width: 60px;
}

JS fiddle

2) 您可以使用 JQuery 直接完成此操作。首先，您需要一个函数来生成每个框:

function genSquare(front, back) {
        return "<div class='trigger'>\
            <div class='hover panel'>\
          <div class='front'>\
            <div class='box1'>\
              <p>" + front + "</p>\
            </div>\
          </div>\
          <div class='back'>\
            <div class='box2'>\
              <p>"+back+"</p>\
            </div>\
          </div>\
        </div>\
  </div>"
}

然后你需要为每个你想添加的盒子调用它:

$( document ).ready(function() {
    $(genSquare('hello', 'world')).appendTo( '.square-container' );
    ...
}

JQuery 根据 genSquare() 返回的字符串创建一个新元素，并将该元素附加到类为 .square-container 的对象中。实际上，我建议为该容器提供一个 ID 以供引用。

JS fiddle

请注意，我在设置触发动画操作之前动态添加了框，以便动画在动态添加的框上运行。如果您希望在页面加载后的某个时间动态添加框，请参阅 https://stackoverflow.com/a/21239248/4799121 .