原生js实现网页中图片放大功能

网页中实现点击图片充满全屏
const imgClick=(url)=>{
	//该点击方法绑定到需要放大的图片上传入图片地址
	let divDOM = document.createElement('div');
	divDOM.style.cssText='position:fixed;z-index:99999;width:100%;height:100%;left:0;top:0;background:#fff;display:flex;justify-content: center;align-items: center;';
	divDOM.innerHTML=`<img src=${e.currentTarget.src} style='max-height:100%;' />`;
	divDOM.onclick=()=>{ 
		document.querySelectorAll('body')[0].removeChild(divDOM);
	}
	document.querySelectorAll('body')[0].appendChild(divDOM);
}

发布了15 篇原创文章 · 获赞 2 · 访问量 248
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览