JohnnyCoin

博客园 首页 新随笔 联系 订阅 管理
#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";
}

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

posted on 2016-04-06 16:39  JohnnyCoin  阅读(379)  评论(0)    收藏  举报