js點擊圖片實現(xiàn)查看大圖簡單方法

更新時間：2023年06月23日 09:33:35 作者：草巾冒小子

今天開發(fā)的時候,遇到要點擊縮略圖之后顯示圖片的大圖查看,所以本文給大家分享下,這篇文章主要給大家介紹了關(guān)于js點擊圖片實現(xiàn)查看大圖的簡單方法,需要的朋友可以參考下

js 點擊圖片實現(xiàn)查看大圖

點擊圖片放大縮小（遮罩）

截圖：點擊放大，并顯示ico放大鏡

代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>點擊圖片放大縮小（遮罩）</title>
<style type="text/css">
<style type="text/css">
	.min {
		max-height:25px;
	}
	.showImg{cursor: zoom-in;}
	#bigImg{cursor: zoom-out;}
</style>
</style>
</head>
<body>
<!-- 我圖片是放在一個td里面的（當(dāng)然還有其它內(nèi)容...）-->
<table>
	<td>
		<img id="showImg" class="showImg min" src="phpcms問題統(tǒng)計/QQ截圖20210609140112.png" width="200"/>
	</td>
	<td>
		<img id="showImg" class="showImg min" src="phpcms問題統(tǒng)計/QQ截圖20210609140342.png" width="200"/>
	</td>
	<td>
		<img id="showImg" class="showImg min" src="phpcms問題統(tǒng)計/QQ截圖20210609142248.png" width="200"/>
	</td>
	<td>
		<img id="showImg" class="showImg min" src="phpcms問題統(tǒng)計/QQ截圖20210609160600.png" width="200"/>
	</td>
	<td>
		<img id="showImg" class="showImg min" src="phpcms問題統(tǒng)計/QQ截圖20210609160901.png" width="200"/>
	</td>
</table>
<!-- 遮罩區(qū)域（先將div隱藏）-->
<div id="back-curtain" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.5);z-index:998;width:100%;display:none;">
	<!--放大后的圖片-->
	<div id="imgDiv" style="position:absolute;">
		<img id="bigImg" src="" />
	</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// 圖片點擊放大
$('.showImg').on('click', function(){
	imgShow("#imgDiv", "#bigImg", $(this), "#back-curtain");
});
function imgShow(imgDiv, bigImg, _this, curtain) {
	// 圖片路徑
	var src = _this.attr("src");
	$(bigImg).attr("src", src);
	// 加載圖片,獲取當(dāng)前點擊圖片的真實大小
	$("<img/>").attr("src", src).load(function(){
		var windowWidth = $(window).width();
		var windowHeight = $(window).height();
		var realWidth = this.width;
		var realHeight = this.height;
		var imgWidth, imgHeight;
		var scale = 0.8;
		if (realHeight > windowHeight * scale) {
			imgHeight = windowHeight * scale;
			imgWidth = imgHeight / realHeight * realWidth;
			if (imgWidth > windowWidth * scale) {
				imgWidth = windowWidth * scale;
			}
		} else if (realWidth > windowWidth * scale) {
			imgWidth = windowWidth * scale;
			imgHeight = imgWidth / realWidth * realHeight;
		} else {
			imgWidth = realWidth;
			imgHeight = realHeight;
		}
		$(bigImg).css({'width':imgWidth});
		//計算圖片與窗口左邊距
		var left = (windowWidth - imgWidth) / 2;
		//計算圖片與窗口上邊距 
		var top = (windowHeight - imgHeight) / 2;
		// 圖片位置
		$(imgDiv).css({'top':top, 'left':left});
		// 圖片淡入
		$(curtain).fadeIn("fast");
		// 遮罩效果
		$(curtain).css({
	        'position':'fixed',
	        'overflow-y':'auto',
	        'width':'100%',
	        'height':'100%',
	  		'z-index':'998'
        }).show();
	});
	// 點擊圖片或遮罩，圖片淡出
	$(curtain).on('click', function(){
		$(this).fadeOut("fast");
	});
}
</script>
</body>
</html>

總結(jié)

到此這篇關(guān)于js點擊圖片實現(xiàn)查看大圖的文章就介紹到這了,更多相關(guān)js點擊圖片查看大圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: