原生js实现图片预览

  • 分类:【前端
  • 浏览【28】
  • 评论【0】
  • 更新【2020-7-29 11:45:04】

不依赖jquery也可以实现图片预览功能:

<!--图片放大后的div 开始  这块粘贴在你的html中最后body前 -->
<div id="outerdiv" style="text-align: center;position: fixed;z-index: 9999;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(28,28,28,0.9);">
	<img id="bigimg" style="max-height: 800px;max-width: 100%;border: 0;margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" src="" />
</div>
<!--图片放大后的div 结束 这块粘贴在你的html中最后body前-->
<!--js开始 是放大点击的触发事件 这块粘贴在你的html中最后body前-->
<script type="text/javascript">
	//图片放大
	document.querySelector("#outerdiv").style.display = "none";
	document.querySelectorAll("img").forEach(function (item) {
		item.style.cursor = "pointer";
	});

	document.querySelectorAll("img").forEach(function (item) {
		item.addEventListener("click", function () {
			imgShow("#outerdiv", "#bigimg", this);
		})
	})

	function imgShow(outerdiv, bigimg, _this) {
		var src = _this.src;//获取当前点击的pimg元素中的src属性
		document.querySelector('#outerdiv').style.display = "block";
		document.querySelector(bigimg).src = src;//设置#bigimg元素的src属性    
	}
	document.querySelector("#outerdiv").addEventListener("click", function () {
	//再次点击淡出消失弹出层
		document.querySelector('#outerdiv').style.display = "none";
	});
</script>
<!--js开始 是放大点击的触发事件 这块粘贴在你的html中最后body前-->

整体代码量少,实现也简单。效果如下: 预览前 预览