javascript - 单击时使用javascript使图像变大

Question

我试图让我的脚本与我的 html 一起工作，以确保当单击图像时它们会变大。当您单击图像时，我希望能够看到主页。当我点击图片时没有任何反应..请帮忙!

   <script type = "text/javascript">

function lightBox () {
    document.getElementById("BG").style.display = "block";
    document.getElementById("PG").style.display = "block";
}

function hideBox() {
    document.getElementById("BG").style.display = "none";
    document.getElementById("PG").style.display = "none";

}

</script>

<h1> My Page </h1>


<div id "BG" onClick "Box();">



</div>


<div id = "FG">

<img src = "sunset_1.jpg" width = "100" height = "60">


</div>


<div id = "thumb">

<img src = "sunset_1.jpg" width = "100" height = "60" onClick ="lightBox();">
<img src = "sunset_2.jpg" width = "100" height= "60"onClick ="lightBox();"> 
<img src = "sunset_3.jpg" width= "100" height="60" onClick ="lightBox();"> 
<img src = "sunset_4.jpg" width= "100" height= "60" onClick ="lightBox();">


</div>
 <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

</p>




#BG  {
        width :100%;
        height:100%;
        background-color:#000;
        position: fixed;
        opacity: 0.8;
        -moz-opacity:0.8;
        -webkit-opacity:0.8;
        display:none;
        cursor: pointer;

}

#FG {

        border:1px solid #ccc;
        background-color:#fcfcfc;
        position: fixed;
        height:350px;
        width:550px;
        left:50%;
        margin-left:-275px;
        top:50px;
        display: none;
}

Answer 1

您的代码有点不稳定，但是坚持您的方法，这可能会有所帮助。

这是一些修改后的 HTML，请参阅 this JSFiddle用于更改 CSS 和 JavaScript。

<h1> My Page </h1>

<div id="BG" onClick="FG_clicked();">
    <div id="FG">
    <img src="http://placehold.it/900x400">
</div>
</div>

<div id="thumb">
    <img src="http://placehold.it/350x150" width="100" height="60" onClick="lightBox();">
    <img src="http://placehold.it/350x150" width="100" height="60" onClick="lightBox();">
    <img src="http://placehold.it/350x150" width="100" height="60" onClick="lightBox();">
    <img src="http://placehold.it/350x150" width="100" height="60" onClick="lightBox();">
</div>