html中点击照片时放大缩小,jQuery实现的图片点击放大缩小功能案例

本文实例讲述了jQuery实现的图片点击放大缩小功能。分享给大家供大家参考，具体如下：

我们不废话，直接上例子。首先利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好)，在图片放大的时候同时禁止页面的滑动，如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图片的宽度变成100%，在web上长度可能会超出屏幕 的高度)。

来看css部分代码：

/*全屏显示大图*/

.opacityBottom{

width: 100%;

height: 100%;

position: fixed;

background:rgba(0,0,0,0.8);

z-index:1000;

top: 0;

left: 0

}

.none-scroll{

overflow: hidden;

height: 80%;

}

.bigImg{

width:80%;

height: 80%;

left:10%;

top:10%;

position:fixed;

z-index: 10001;

}

咱们再来看下js部分的代码：

$(".image_click").click(function () {

var imgsrc = $(this).attr("src");

var opacityBottom = '

';

$(document.body).append(opacityBottom);

toBigImg();//变大函数

});

function toBigImg(){

$("#opacityBottom").addClass("opacityBottom");

$("#opacityBottom").show();

$("html,body").addClass("none-scroll");//下层不可滑动

$(".bigImg").addClass("bigImg");

/*隐藏*/

$("#opacityBottom").bind("click",clickToSmallImg);

$(".bigImg").bind("click",clickToSmallImg);

var imgHeight = $(".bigImg").prop("height");

if(imgHeight < h){

$(".bigImg").css({"top":(h-imgHeight)/2 + 'px'});

}else{

$(".bigImg").css({"top":'0px'});

}

function clickToSmallImg() {

$("html,body").removeClass("none-scroll");

$("#opacityBottom").remove();

}

};

image_click是绑定图片的class值，这个案例非常简单，还可以通过修改css来展示不同的样式的图片，大家有时间可以研究下，今天有点懒，直接贴的代码。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。