文章目录
图片放大 方式一图片放大 方式二
图片放大 方式一
借鉴于 https://blog.csdn.net/Lxinccode/article/details/80353060
function clickImgToEnlarge(obj) {
//点击评论图片放大
$('#enlargeImgDiv').show();
$('#enlargeImg').attr('src',obj.src);
//获取图片大小
var widthHtml = $('#enlargeImg').width();
var heightHtml = $('#enlargeImg').height();
var a_widthHtml = '-' + widthHtml / 2;
var a_heightHtml = '-' + heightHtml / 2;
//图片宽高比例
var proportion = widthHtml / heightHtml;
//获取浏览器可视区域大小
var windowsWidth = $(window).width();
var windowsHeight = $(window).height();
var a_windowsWidth = windowsWidth * 0.8;
var a_windowsHeight = windowsHeight * 0.8;
var b_windowsWidth = '-' + a_windowsWidth / 2;
var b_windowsHeight = "-" + a_windowsHeight / 2
var a = "-" + proportion * a_windowsHeight / 2;
if(widthHtml > a_windowsWidth || heightHtml > a_windowsHeight) {
$('#enlargeImg').css({
'height': a_windowsHeight + 'px',
'position': 'fixed',
'display': 'block',
'left': 50 + '%',
'margin-left': a + 'px',
'top': 50 + '%',
'margin-top': b_windowsHeight + 'px',
})
} else {
$('#enlargeImg').css({
'position': 'fixed',
'display': 'block',
'left': 50 + '%',
'margin-left': a_widthHtml + 'px',
'top': 50 + '%',
'margin-top': a_heightHtml + 'px',
})
}
}
//点击放大后的图片隐藏
$('#enlargeImgDiv').click(function() {
$('#enlargeImgDiv').hide();
$('#enlargeImg').attr('src', '')
$('#enlargeImg').removeAttr("style")
});
图片放大 方式二
借鉴于 https://blog.csdn.net/weixin_43747105/article/details/86302254
引入js文件
放大代码
function clickImgToEnlarge() {
$(document).ready(function () {
$('#imgUl').viewer({
title: false,
fullscreen: false
});
});
jQuery图片查看器插件Viewer.js语法: http://www.jq22.com/jquery-info6536
jQuery图片查看器插件Viewer.js下载: https://gitee.com/www.gyh.com/jQueryViewer/tree/master