JavaScript相册单图放大预览第二版（js控制图片上下居中）

本文为博主原创文章，只为分享而编，欢迎各位学习以及转载。

本文链接：https://blog.csdn.net/qq285679784/article/details/77102497

CSS

.zoomify img{ cursor: pointer; cursor:url(/Images/icon/zoombig.cur),pointer;cursor: -webkit-zoom-in; cursor: zoom-in;}
.zoomify-shadow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: none; z-index: 1500; background-color: #000;   background: rgba(0, 0, 0 , .8); filter: alpha(opacity=80);opacity:0.8; -moz-opacity:0.8;  }
.zoomify-shaimg{position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: none; z-index: 1501; overflow:scroll;}
.zoomify-shaimg img{ display: block; margin:0 auto; }
.zoomify-shaimg.zoomout{cursor: pointer;cursor:url(/Images/icon/zoommin.cur),pointer; cursor: -webkit-zoom-out; cursor: zoom-out;}
.zoomify-shaimg.zoomin{cursor: pointer; cursor:url(/Images/icon/zoombig.cur),pointer;cursor: -webkit-zoom-in; cursor: zoom-in; }

HTML

在需要实现的模块中加入class="zoomify"  
<div class="zoomify">  
  <img src="images/33a.bmp">  
  <img src="images/33c.bmp">  
  <img src="images/33d.bmp">  
</div>  
  
body中加入zoomify html  
<div class="zoomify-shadow">  
</div>  
<div class="zoomify-shaimg zoomout">  
<img src="" /></div>

$(function() {
    $(".zoomify-shadow,.zoomify-shaimg").click(function() {
        $(".zoomify-shadow,.zoomify-shaimg").css("display", "none");
        $(document.body).css({ "overflow-x": "auto", "overflow-y": "auto" });
    });
    $(".zoomify img").live("click", function() {
        $(".zoomify-shadow").css("width", $(window).width()).css("height", $(window).height());
        $(".zoomify-shaimg").css("width", $(window).width()).css("height", $(window).height());
        $(".zoomify-shaimg img").attr("src", $(this).attr("src"));
        var _image = new Image();
        _image.src = $(this).attr("src");
        if (_image.height <= $(window).height()) {
            $(".zoomify-shaimg img").css("margin-top", ($(window).height() - _image.height) / 2).css("margin-bottom", ($(window).height() - _image.height) / 2);
            $(".zoomify-shaimg").css("overflow-y", "hidden");
        } else {
            $(".zoomify-shaimg img").css("margin-top", 30).css("margin-bottom", 30);
            $(".zoomify-shaimg").css("overflow-y", "auto");
            $(document.body).css({ "overflow-x": "hidden", "overflow-y": "hidden" });
            $(".zoomify-shadow").css("width", $(window).width()).css("height", $(window).height());
            $(".zoomify-shaimg").css("width", $(window).width()).css("height", $(window).height());
        }
        if (_image.width <= $(window).width()) {
            $(".zoomify-shaimg").css("overflow-x", "hidden");
            $(".zoomify-shadow").css("width", $(window).width()).css("height", $(window).height());
            $(".zoomify-shaimg").css("width", $(window).width()).css("height", $(window).height());
        } else {
            $(".zoomify-shaimg").css("overflow-x", "auto");
        }
        $(".zoomify-shadow,.zoomify-shaimg").css("display", "block");
    });
    $(".zoomify img,.zoomify-shaimg").live("mousedown", function(e) { e.preventDefault(); });
});