#ShowBigImgDiv{position: absolute;z-index: 10001;display: none;cursor: pointer;} #FullScreenDiv{position: absolute;z-index: 10000;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"; }
简单的实现了图片的缩放功能
时间: 2024-08-29 18:14:59