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，有关CSS和JavaScript的更改，请参阅this JSFiddle。

<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>

单击时使用javascript使图像更大

1 个答案: