Question

如果有人已经问过这个问题，我很抱歉，但我找不到答案。我需要制作一个包含4张图片（窗口样式）的简单图库，当您点击图片时，会出现/弹出更大的图片，当您再次点击它时它会关闭。我想要制作一张带有较小图片的简单表2x2，当你点击任何图像时，一个较大的表出现在所有图像的顶部。我看到一个使用“block”和“none”的功能来显示/隐藏图片，但我无法使其工作。

TNX！

编辑：

<html>
<head>
    <title>page</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="design.css" type="text/css" />
    <script type="text/javascript" src="js.js"></script>
</head>

<body>

    <div id="frame">

        <table id="galleryTable">

                            <tr>
                              <td><img src="img1.jpg" alt="1" style="width:400px;height:200px;"></td>
                              <td><img src="img2.jpg" alt="2" style="width:400px;height:200px;"></td> 
                            </tr>
                            <tr>
                              <td><img src="img3.jpg" alt="1" style="width:400px;height:200px;"></td>
                              <td><img src="img4.jpg" alt="1" style="width:400px;height:200px;"></td> 
                            </tr>

                        </table>
    </div>

    <div>        
    </div>
</body>
</html>

现在，我按照自己的意愿制作了css设计，现在我需要js功能/功能，这些功能将在鼠标陈词滥调中打开或放大我桌子上的所选图像。或者据我所知，我可以在单独的div中预加载图片并隐藏/取消隐藏它们。有人可以帮助我完成这些功能吗？

CSS如果需要：

*{
margin: 0px;
padding: 10px;
}

body{
    font: 12px Arial;
    text-align: center;
}

#frame{
    align-content: center;
    width: 1024px;
    margin: 15px auto;

}

.table, th, td{
    background: white;
    text-align: center;
    padding: 3px;
    border: 1px solid black;
    color: black;
}

Answer 1

尝试以下方法：

np.random.permutation()

单击显示，隐藏大图像表单库

1 个答案: