html JavaScript 点击图片放大，点击图片缩小

参考地址 https://www.jq22.com/webqd7166

可以下载demo 然后对着改 我的是这么用的

前置，先把图片 class 自定义设置 item_img

$.fn.ImgZoomIn = function() {
    imgstr = '<img id="ImgZoomInImage" src="' + $(this).attr('src') + '" style="cursor:pointer; display:none; position:absolute; z-index:10001;" />';
    if ($('#ImgZoomInImage').length < 1) {
        $('body').append(imgstr);
    } else {
        $('#ImgZoomInImage').attr('src', $(this).attr('src'));
    }

    $('#ImgZoomInImage').css('width', '40%');
    $('#ImgZoomInImage').css('height', '100%');
    $('#ImgZoomInImage').css('top', '-5%');
    $('#ImgZoomInImage').css('margin-left', '30%');

    $('#ImgZoomInImage').show();
};
// PC端
$(document).ready(function() {
    $(document).on('click', '.item_img', function() {
        $(this).ImgZoomIn();
        $(document.body).css({
            "overflow-x": "hidden",
            "overflow-y": "hidden"
        });
    });

    $(document).on('click', '#ImgZoomInImage', function() {
        $('#ImgZoomInImage').hide();
        $(document.body).css({
            "overflow-x": "auto",
            "overflow-y": "auto"
        });
    });
});