原生js实现图片预览
不依赖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前-->
整体代码量少,实现也简单。效果如下: