jQuery图片点击放大

Html

Css

body {
	margin:0 auto;
}
.add_photo {
	width:100%;
	margin:0 auto;
}
ul {
	width:250px;
	margin:0 auto;
}
li {
	width:250px;
	margin:0 auto;
}
.add_photo img {
	width:250px;
	height:auto;
	margin:0 auto;
}

$.fn.ImgZoomIn = function() {
    var window_h = $(window).height();
    var scroll_h = $(window).scrollTop();

bgstr = '<div id="ImgZoomInBG" style="position: absolute;filter:Alpha(Opacity=70); opacity:0.7;z-index: 10000;background-color: #000;display: none;"></div>';
    imgstr = '<img id="ImgZoomInImage" src="' + $(this).attr('src') + '" style="cursor:pointer; display:none; position:absolute; z-index:10001;" />';
    if ($('#ImgZoomInBG').length < 1) {
        $('body').append(bgstr);
    }
    if ($('#ImgZoomInImage').length < 1) {
        $('body').append(imgstr);
    } else {
        $('#ImgZoomInImage').attr('src', $(this).attr('src'));
    }

$('#ImgZoomInBG').css('top', scroll_h + 'px');
    $('#ImgZoomInBG').css('width', '100%');
    $('#ImgZoomInBG').css('height', window_h + 'px');

$('#ImgZoomInImage').css('width', '100%');
    $('#ImgZoomInImage').css('height', (window_h / 2) + 'px');
    $('#ImgZoomInImage').css('top', (scroll_h + window_h / 4) + 'px');

$('#ImgZoomInBG').show();
    $('#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();
        $('#ImgZoomInBG').hide();
        $(document.body).css({
            "overflow-x": "auto",
            "overflow-y": "auto"
        });
    });
});
// 手机端
$(document).ready(function() {
    $(document).on('touchend', '.item_img', function(t) {
        $(this).ImgZoomIn();
        document.ontouchstart = function() {
            return false;
        }
        t.preventDefault();
    });

$(document).on('touchend', '#ImgZoomInImage', function(t) {
        $('#ImgZoomInImage').hide();
        $('#ImgZoomInBG').hide();
        document.ontouchstart = function() {
            return true;
        }
        t.preventDefault();
    });
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jQuery图片点击放大



代码描述：jQuery图片点击放大预览代码

更新时间：2020-11-18 23:56:19
pc端移动端图片点击放大

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

昙花一现

相关代码

jQuery图片点击放大

最新