jquery 图片放大

上一篇是关于手风琴效果的,但是有时候我们需要放大的图片大小不规律,想要在屏幕中间显示大图。

图片放大可以做为单独的效果,也可以和其他的效果结合起来。比如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()函数就可以了。

现在可以把无缝切换和图片放大结合了。效果很不错吧!!

版权所有,转载请注明出处,谢谢!

上一篇:从零开始学习PYTHON3讲义(十二)画一颗心送给你


下一篇:latex 异或