JS实现图片列表浏览缩放拖拽

最新推荐文章于 2023-02-08 10:23:51 发布

pmsyn

最新推荐文章于 2023-02-08 10:23:51 发布

阅读量232

点赞数

分类专栏： js 文章标签：图片拖拽图片缩放

本文链接：https://blog.csdn.net/rookiepm/article/details/115377704

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS实现图片列表浏览缩放拖拽

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		html, body {
			width: 100%;
			height: 100%;
		}
		.imgBox img {
			border: 1px solid #000;
			cursor: zoom-in;
			width: 300px;
		}
		.viewer-close::before {
		  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC');
		  background-repeat: no-repeat;
		  background-size: 280px;
		  color: transparent;
		  display: block;
		  font-size: 0;
		  height: 20px;
		  line-height: 0;
		  width: 20px;
		 
		  
	}
	.viewer-close::before {
		background-position: -260px 0;
		content: 'Close';
		bottom: 15px;
		left: 15px;
		position: absolute;
	}
	.viewer-close{
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		cursor: pointer;
		height: 80px;
		overflow: hidden;
		position: absolute;
		right: -40px;
		top: -40px;
		-webkit-transition: background-color 0.15s;
		transition: background-color 0.15s;
		width: 80px;
		}
	</style>
</head>
<body>
	<div class="imgBox">
		<img onclick="imgClick(this)" class="img" src="./img/1.jpg" alt="">
		<img  onclick="imgClick(this)" class="img" src="./img/2.jpg" alt="">
	</div>
	<script>
		
		function showBigImg (url) {
			// 获取可视区域的宽高
			var bodyW = document.body.clientWidth;
			var bodyH = document.body.clientHeight;
			// 创建弹出层
			var div = document.createElement('div');
			div.setAttribute('style', 'display: none;cursor: pointer;position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.3)');
			div.style.width = bodyW + 'px';
			div.style.height = bodyH + 'px';
			document.getElementsByTagName('body')[0].appendChild(div);
			if (typeof url === 'string') {
				div.style.display = 'block';
			}
			var close = document.createElement('span');
			close.className="viewer-close";
			close.setAttribute('style','float:right;z-index:999;position:relative');
			
			div.appendChild(close);
			// 创建图片盒子
			var img = new Image();
			img.src = url;
			div.appendChild(img);
			var size = 0;
			// 图片加载之后
			img.onload = function () {
				img.setAttribute('style', 'position: relative;z-index:998;cursor: move;');
				// 蒙层宽高
				var divW = div.style.width.split('p')[0];
				var divH = div.style.height.split('p')[0];
				var imgW = img.width;
				var imgH = img.height;
				// 宽比高大
				if (imgW >= imgH) {
					var showH = imgH / imgW * divW;
					// 计算后的高度大于蒙层高度
					if (showH > divH) {
						img.style.height = divH + 'px';
						img.style.left = (divW - imgW / imgH * divH) / 2 + 'px';
					} else {
						img.style.width = divW + 'px';
						img.style.top = (divH - showH) / 2 + 'px';
					}
				} else {
					var showW = imgW / imgH * divH;
					img.style.width = divW + 'px';
					img.style.left = (divW - showW) / 2 + 'px';
				}
			}
			// 鼠标的滚动放大
			function mWheel (e) {
				var ev = e || window.event;
				var dir = ev.detail ? ev.detail * (-120) : ev.wheelDelta;
				if (dir > 0) {
					size += dir / 1000;
					img.style.transform = `scale(${1 + size})`;
				} else {
					size += dir / 1000;
					if (size < -1) {
						size = -1;
						img.style.transform = `scale(${1 + size})`;
						return;
					}
					img.style.transform = `scale(${1 + size})`;
				}
			}
			// 判断浏览器滚轮事件支持
			var mouseWheelEvent = /Firefox/i.test(navigator.userAgent) ? 'DOMMouseScroll' : 'mousewheel';
			if (div.attachEvent) {
				// ie opera Firefox
				div.attachEvent('on' + mouseWheelEvent, mWheel);
			} else if (div.addEventListener) {
				// W3C
				div.addEventListener(mouseWheelEvent, mWheel, false);
			}
			var imageObj = this;
			// 移动图片
			div.onmousedown = function (e) {
				var ev = e || window.event;
				var flaginner = true;
				// 鼠标点击的坐标
				var mouseX = ev.pageX;
				var mouseY = ev.pageY;
				// 鼠标在图片中的坐标
				var imgMouseX = mouseX - img.offsetLeft;
				var imgMouseY = mouseY - img.offsetTop;
				this.onmousemove = function (e) {
					ev = e || window.event;
					console.log(ev, 'mousemove');
					// 鼠标移动的坐标
					var mouseX2 = ev.pageX;
					var mouseY2 = ev.pageY;
					if (mouseX - mouseX2 > 5 || mouseY - mouseY2 > 5 || mouseX2 - mouseX > 5 || mouseY2 - mouseY > 5) {
						flaginner = false;
					}
					ev.preventDefault();
					var moveX = mouseX2 - imgMouseX;
					var moveY = mouseY2 - imgMouseY;
					img.style.left = moveX + 'px';
					img.style.top = moveY + 'px';
				};
				this.onmouseup = function () {
					/*if (flaginner) {
						if (this.isIE || this.isIE11) {
							this.removeNode(true);
						} else {
							this.remove();
						}
						this.isIE = function isIE() {
							if (!!window.ActiveXObject || 'ActiveXObject' in window) {
								// ie浏览器
								return true;
							} else {
								return false;
							}
						}
						this.isIE11 = function isIE11() {
							if (/Trident\/7\./.test(navigator.userAgent)) {
								return true;
							} else {
								return false;
							}
						}
					}*/
					this.onmousemove = null;
					this.onmouseup = null;
				};
				// disable default wheel action of scrolling page
				if (ev.preventDefault) {
					ev.preventDefault();
				} else {
					return false;
				}
			}
			close.onclick = function(){
				div.remove();
			}
		}
		function imgClick (e) {
			showBigImg(e.src);
		};
	</script>
</body>
</html>

pmsyn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现图片列表浏览缩放拖拽

JS实现图片列表浏览缩放拖拽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>
复制链接

扫一扫