web頁面圖片放大

圖片放大 方式一

借鑑於 https://blog.csdn.net/Lxinccode/article/details/80353060

<div class="evidenceImgDiv">
	<img src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87&hs=2&pn=2&spn=0&di=192500&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3190441126%2C995644236&os=1454830399%2C2300565235&simid=4177018013%2C777657142&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87&objurl=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb1cce6f996734bdbb9b3fb9ef7705deabc980e35493b-ysf8BZ_fw658&fromurl=ippr_z2C%24qAzdH3FAzdH3Fi7wkwg_z%26e3Bv54AzdH3FrtgfAzdH3F80abl000mdAzdH3F&gsm=&islist=&querylist=" border="5px" onclick="clickImgToEnlarge(this);"/>
</div>
<div id="enlargeImgDiv" style="cursor:pointer;z-index: 1111">
	<img src="" border="5px" id="enlargeImg"/>
</div>
<script>
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")
});
</script>

圖片放大 方式二

借鑑於 https://blog.csdn.net/weixin_43747105/article/details/86302254

1. 引入js文件

<link rel="stylesheet" href="${ctxPath}/css/viewer.min.css">
<script src="${ctxPath}/plugins/jquery/jquery.min.js"></script>
<script src="${ctxPath}/js/viewer-jquery.min.js"></script>

2. 放大代碼

<ul id="imgUl">
	<div class="evidenceImgDiv">
		<img src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87&hs=2&pn=1&spn=0&di=39490&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3632677651%2C3179755979&os=2150266739%2C1838726856&simid=0%2C0&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87&objurl=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb8a2f3cb90ebfdcc8f432e55137d8008d8e0b53c656d-LYlEC1_fw658&fromurl=ippr_z2C%24qAzdH3FAzdH3Fi7wkwg_z%26e3Bv54AzdH3FrtgfAzdH3F8ml9lbc0n9AzdH3F&gsm=&islist=&querylist=" border="5px" onclick="clickImgToEnlarge();"/>
	</div>
	<div class="evidenceImgDiv">
		<img src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87&hs=2&pn=2&spn=0&di=192500&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3190441126%2C995644236&os=1454830399%2C2300565235&simid=4177018013%2C777657142&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87&objurl=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb1cce6f996734bdbb9b3fb9ef7705deabc980e35493b-ysf8BZ_fw658&fromurl=ippr_z2C%24qAzdH3FAzdH3Fi7wkwg_z%26e3Bv54AzdH3FrtgfAzdH3F80abl000mdAzdH3F&gsm=&islist=&querylist=" border="5px" onclick="clickImgToEnlarge();"/>
	</div>
</ul>

<script>
	function clickImgToEnlarge() {
		$(document).ready(function () {
			$('#imgUl').viewer({
				title: false,
				fullscreen: false
			});
		});
</script>

jQuery圖片查看器插件Viewer.js語法：
http://www.jq22.com/jquery-info6536

jQuery圖片查看器插件Viewer.js下載：
https://gitee.com/www.gyh.com/jQueryViewer/tree/master