上一篇是关于手风琴效果的，但是有时候我们需要放大的图片大小不规律，想要在屏幕中间显示大图。
图片放大可以做为单独的效果，也可以和其他的效果结合起来。比如Demo 里的Demo5.html是以图片无缝切换和图片放大结合的。
整个效果分为两个部分。
1、定义遮罩层
$('.mark').css({
position: "absolute",
top: 0,
backgroundColor: "#777",
zIndex: 1002,
left: 0,
display: " none"
} )
当点击图片显示大图的时候把整个屏幕遮罩，改变透明度
function marked() {
$('.mark').css({
//height: $(window).height(),
//width: $(window).width()
//出现滚动条的时候有问题(2013-11-07)
height: document.documentElement.scrollHeight,
width: document.documentElement.scrollWidth
}).show().animate({opacity: 0.6}, 0);
}
2、定义图片在屏幕中间显示。首先要做的是在a标签链接大图片路径
<li>
<span style="position: absolute;bottom: 5px;width: 100%;text-align: center;">111111</span>
<a class="img_b" href="images/1_b.jpg">
<img class="aa" alt="" width="150" height="150" src="data:images/1_s.jpg"/>
</a>
</li>
获取图片的高宽来判断显示位置，设置图片位置时要在getimg.onload = function () {}里面设置，因为当图片太大时，我们必须要先等它加载完了才知道他的高宽。
function setImg(url) {
var getimg = new Image();
//getimg.src = url;//如果放在这里在IE有问题，点击第一次后就会再也不出现，缓存的原因。把他放到后面（2013-11-07）
var imgh, imgw;
getimg.onload = function () {
imgh = getimg.height;
imgw = getimg.width;
var trueW = imgw * (400 / imgh);
if (imgh > 400) {//如果图片太大，高度设为400，宽度等比例缩小
$('.imageBox_bg').css({height: 400, width: trueW});
$('.bigImg').css({height: 400, width: trueW});
}
else {
$('.imageBox_bg').css({height: imgh, width: imgw });
$('.bigImg').css({height: imgh, width: imgw});
}
divCenter(url);
};
getimg.src = url;
}
图片在屏幕中间显示。
function divCenter(url) {
// var top = ($(window).height() - $('.imageBox_bg').height()) / 2,
// left = ($(window).width() - $('.imageBox_bg').width()) / 2;
//当出现滚动条的时候就不能再中间显示（2013-11-07）
var top = ($(window).height() - $('.imageBox_bg').height()) / 2 + $(document).scrollTop(),
left = ($(window).width() - $('.imageBox_bg').width()) / 2 + $(document).scrollLeft();
$('.bigImg').attr("src", url);
$('.imageBox_bg').css({
top: top,
left: left
}).stop().fadeIn(500);
}
在click function里返回值要设为false，不然点击图片的时候会在另一个页面显示图片了。
$(this).click(function () {
var url = $(this).attr("href");
setImg(url);
marked();
return false;
});
除了主要的两个部分，还有一些点击大图后隐藏大图，这些代码比较简单，用hide（）函数就可以了。
现在可以把无缝切换和图片放大结合了。效果很不错吧！！
版权所有，转载请注明出处，谢谢！