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

源码下载





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>

JS

$(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(); });
});