前端jquery實現圖片點選放大縮小
阿新 • • 發佈:2019-01-23
利用dom的垂直分層實現圖片的點選放大和縮小(手機上使用的效果較好),在圖片放大的時候同時禁止頁面的滑動,如果在web端的話可以不禁止螢幕的滾動(因為圖片放大是將圖片的寬度變成100%,在web上長度可能會超出螢幕 的高度)。
js部分:
css部分:function clickToBigImg(){//繫結圖片函式 //var clickImgId = $(this).attr("id"); var imgsrc = $(this).attr("src"); //alert (imgsrc); var opacityBottom = '<div id="opacityBottom" style="display: none"><img class="bigImg" src="'+ imgsrc +'" ></div>'; $(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(); } };
/*全屏顯示大圖*/
.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: 100%;
}
.bigImg{
width:100%;
left:0%;
top:10%;
position:fixed;
z-index: 10001;
}
附效果圖: