jQuery實作圖檔點選放大縮小（小案例）

    我們不廢話，直接上例子。首先利用dom的垂直分層實作圖檔的點選放大和縮小（手機上使用的效果較好），在圖檔放大的時候同時禁止頁面的滑動，如果在web端的話可以不禁止螢幕的滾動（因為圖檔放大是将圖檔的寬度變成100%，在web上長度可能會超出螢幕 的高度）。

    來看css部分代碼：

<style>
    /*全屏顯示大圖*/
    .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;

    }
</style>      

    咱們再來看下js部分的代碼：

$(".image_click").click(function () {
    var imgsrc = $(this).attr("src");
    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();
    }
};      

    image_click是綁定圖檔的class值，這個案例非常簡單，還可以通過修改css來展示不同的樣式的圖檔，大家有時間可以研究下，今天有點懶，直接貼的代碼。如果感覺不錯的話，請多多點贊支援哦。。。