通过JS简单实现图片缩放

时间：2022-10-17 18:16:08
#ShowBigImgDiv{position: absolute;z-index:;display: none;cursor: pointer;}

#FullScreenDiv{position: absolute;z-index:;display: none;background-color: #919191;filter: alpha(opacity=50);opacity: 0.5; cursor: pointer;}
<div id="FullScreenDiv" onclick="BackFullScreenHidde()" title="点击缩小"></div>

<div id="ShowBigImgDiv" onclick="BackFullScreenHidde()" title="点击缩小"></div><img onclick="BackFullScreen(this.src)" id="pic" alt="身份证" src="<%=rootpath%>/User/tocardimg?code=${user.f16}" height="100px" width="200px">
                
function BackFullScreen() {

    var BigImgUrl = document.getElementById("pic").getAttribute("src");

    var FullScreenDiv = document.getElementById("FullScreenDiv");

    FullScreenDiv.style.width = document.body.clientWidth + "px";

    FullScreenDiv.style.height = document.body.clientHeight + "px";

    FullScreenDiv.style.display = "block";

    var ShowBigImgDiv = document.getElementById("ShowBigImgDiv");

    var ShowBigImgDivPosition;

    ShowBigImgDiv.style.display = "block";

    ShowBigImgDiv.innerHTML = "<img src=\"" + BigImgUrl + "\" width=\"500\" height=\"400\"  border=\"0\" />";

    ShowBigImgDivPosition = document.documentElement.scrollTop;

    if (ShowBigImgDivPosition == 0 || ShowBigImgDivPosition == "") {

        ShowBigImgDivPosition = document.body.scrollTop;

    }

    ShowBigImgDiv.style.top = ShowBigImgDivPosition + ((window.screen.height - ShowBigImgDiv.clientHeight) / 2 - 170 ) + "px";

    ShowBigImgDiv.style.left = (window.screen.width - ShowBigImgDiv.clientWidth) / 2 - 90 + "px";

}

function BackFullScreenHidde() {

    document.getElementById("ShowBigImgDiv").style.display = "none";

    document.getElementById("FullScreenDiv").style.display = "none";

}

简单的实现了图片的缩放功能

相关文章