移动端图片放大实现

html:

js:

	var imgArr = document.querySelectorAll('img');
				console.log(imgArr);
				imgArr.forEach(function (item) {
					item.addEventListener('click',function () {
						console.log(this,111);
						var temp = this.src;
						console.log(temp);
						var objE = document.createElement("div");
						objE.innerHTML = '
' +
							'' +
							'
';
						document.body.appendChild(objE.children[0]);
						//退出图片预览事件
						var $bg = document.querySelector(".bgM");
						$bg.onclick = function() {
							var dm = document.querySelector(".bgM");
							document.body.removeChild(dm);
						}
						//阻止事件冒泡
						var $img = document.querySelector(".img-custom-img2");
						$img.onclick = function(event) {
							event.stopPropagation();
						}
					})
					// console.log(item,123);
				})

css:

.bgM{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  z-index: 1000;
  background-color: rgba(0,0,0,0.85);
  overflow: hidden;
}
.bgM img{
  width: 100%;
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  z-index: 1001;
  margin: auto;
}