单击时使用 java 脚本放大图像

Making an image larger using java script when clicked on

本文关键字：脚本 放大 图像 java 单击      更新时间：2023-09-26

我正在尝试让我的脚本与我的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;
}

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

以下是一些修改后的 HTML，请参阅此 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>
相关文章：