jQ 实现图片查看功能，拖动，放大缩小，旋转

 用jq实现了一个简单的图片查看功能，可拖动，放大缩小旋转。

放大缩小旋转用的是c3的transform属性实现的。

其中拖拽功能和放大缩小是通过控制不同元素来实现的。如果在同一元素上实现，会有图片放大后，拖动位置难以定位的问题。

废话不多说，直接上代码。

<div id="content" class="content">
    <div id="slider" class="movebox">
		<img id="img" class="img" src="img/20230331152308.png" alt="" />
	</div>
</div>

.content{
			width: 500px;
			height: 500px;
			border: 1px solid #ccc;
			position: relative;
			left: 0;
			top: 0;
			margin: 0 auto;
			overflow: hidden;
		}
		.content .movebox{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 50px;
			/*border: 1px solid #ccc;*/
			
			cursor: pointer;
		}
		.img{
			display: block;
			width: 100%;
		}
		img{
			-webkit-user-drag: none;
		}
		body{
			-webkit-user-select: none;
		}

const Controller = function(){
			let Slider = function(){
				var el = $('#slider');
				this.setPosition = function(x,y){
					el.css({
						"left": x,
						"top" : y
					})
				}
				this.getPosition = function(){
					return el.position();
				}
			}
			var opt = {//mouseDownPosition
				x:0,
				y: 0,
				deg: 0,
				scale: 1
			};
			
			var that = this;
			var s = new Slider();
			
			var contentmousemove = function(e){//拖动
				e.stopPropagation();
				let x = e.clientX;
				let y = e.clientY;
				s.setPosition(s.x + x - opt.x,s.y + y - opt.y);
			};
			
			var slidermousedown = function(e){//拖动
				s.x = s.getPosition().left;
				s.y = s.getPosition().top;
				opt.x = e.clientX;
				opt.y = e.clientY;
				$('#content').on('mousemove',contentmousemove);
			};
			
			var setState = function(){
				$("#img").css("transform","rotate(" + opt.deg + "deg) scale(" + opt.scale + ")");
			}
			//复位
			this.reset = function(){
				opt.deg = 0;
				opt.scale = 1;
				setState();
				$("#slider").css({
					"left":0,
					"top": 0
				})
			}
			//旋转
			this.rotate = function(){
				opt.deg += 90;
				if(opt.deg >=360){
					opt.deg = 0;
				}
				setState();
			}
			//滚轮缩放
			this.scrollFunc = function(e) {
	           var e = e || window.event;
	           var wheel = e.wheelDelta || e.detail;
	           console.log(e.wheelDelta);
	           console.log(e.detail);
	           if(wheel > 0) {     //当鼠标滚轮向上滚动时
	                opt.scale += 0.1;
	           }
	           if(wheel < 0) {     //当鼠标滚轮向下滚动时
	               opt.scale -= 0.1;
	           }
	           setState();  
	        }
			//缩放
			this.setScale = function(val){
				opt.scale += val;
				setState();
			}
			//初始化
			function init(){
				$('#slider').on('mousedown',slidermousedown);
				$(document).on('mouseup',function(e){
					$('#content').off('mousemove',contentmousemove);
				})
			}
			
			init();
		}
		
		const con = new Controller();
		$("#xz").click(function(){
			con.rotate();
		})
		$("#fd").click(function(){
			con.setScale(0.2)
		})
		$("#sx").click(function(){
			con.setScale(-0.2)
		})
		$("#fw").click(function(){
			con.reset()
		})
		// 给页面绑定鼠标滚轮事件,针对火狐的非标准事件
        window.addEventListener("DOMMouseScroll", con.scrollFunc)
        //给页面绑定鼠标滚轮事件，针对Google，mousewheel非标准事件已被弃用，请使用 wheel事件代替
        window.addEventListener("wheel", con.scrollFunc)
        //ie不支持wheel事件，若一定要兼容，可使用mousewheel
        window.addEventListener("mousewheel", con.scrollFunc)

如果有更好的实现方法，欢迎评论或者私信。