JavaScript 点击图片放大查看案例

JavaScript 编写图片放大查看案例

---

 HTML 代码

<div id="i">
       <img class="imgs" src="{{ MEDIA_URL }}{{ item.img }}">
</div>

 点击图片，将图片放大

编写一个 div 用于显示放大图片

<div id="big_img">
    <p style="text-align: right">
        <span style="color: #8c8c8c;font-size: 5px">©ESchool - wjw </span>
        <button id="btn_close" style="background: none;border:none;">关闭</button>
    </p>
    <img id="big_image" style="width: 500px; height:500px ;" src="" ; alt="图片">
</div>

编写 CSS 文件

    <style>
        #big_img {
            display: none;
            background: #FFF0F5;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -moz-box-shadow: 10px 10px 50px #909090;
            -webkit-box-shadow: 10px 10px 50px #909090;
            box-shadow: 10px 10px 50px #909090;
            border-radius: 5px;
        }
    </style>

 JS 脚本文件

var list = document.getElementsByClassName("imgs");
var img = document.getElementById("big_image");
var div = document.getElementById("big_img");
document.getElementById("btn_close").onclick = function () {
    div.style.display = "none";
};
for (var i = 0; i < list.length; i++) {
    list[i].onclick = iii;
}

function iii() {
    open(this);
}

function open(elem) {
    img.setAttribute("src", elem.getAttribute("src"));
    div.style.display = "block";
}