每天学一个jquery插件-缩放与拖动

Posted 2021-05-17 阿飞超努力

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每天学一个jquery插件-缩放与拖动相关的知识，希望对你有一定的参考价值。

每天一个jquery插件-缩放与拖动

缩放与拖动

页面中常见的动作，通过拖拽和滚轮缩放一个图片的动作实现

效果如下
在这里插入图片描述

代码部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景图互动</title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script src="js/bjthd.js"></script>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			#div{
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#box{
				border: 1px solid lightgray;
				height: 400px;
				width: 400px;
				background-image: url(img/1.jpeg);
				background-repeat: no-repeat;
				background-position:0 0;
				background-size: 100% 100%;
			}
			.rel{
				background-repeat: no-repeat;
				background-position:0 0;
				background-size: 100% 100%;
			}
		</style>
	</head>
	<body>
		<div id="div">
			<div id="box"></div>
		</div>
	</body>
</html>
<script>
	$("#box").hudong();
</script>

$.prototype.hudong = function(){
	this.arrs().forEach(item=>{//遍历所有的对象，确定挨个绑定上正确的事件
		var $that  =item;
		$that.addClass("rel");
		var w = $that.width();
		var h = $that.height();
		var px = parseInt($that.css("background-position-x").replace('px',''));
		var py = parseInt($that.css("background-position-y").replace('px',''));
		var temppx = px;
		var temppy = py;
		var bw = parseInt($that.css("background-size"));
		var pe = 100//拉伸百分比
		$that.on('mousewheel',function(e){
			var temp = e.originalEvent.deltaY/12.5;
			pe+=temp;
			pe=pe<=25?25:pe;
			pe=pe>=175?175:pe;
			$that.css("background-size",""+pe+"% "+pe+"%");
		})
		var flag = false;
		var p1 = {};
		var p2 = {};
		var tx = 0;
		var ty = 0;
		$that.mousedown(function(e){
			p1 = {
				x:e.offsetX,
				y:e.offsetY
			}
			flag = true;
		}).mouseleave(function(){
			flag = false;
			reload();
		}).mousemove(function(e){
			if(flag){
				p2 = {
					x:e.offsetX,
					y:e.offsetY
				}
				var tp = {
					x:p1.x-p2.x,
					y:p1.y-p2.y,
				}
				tx = px-tp.x;
				ty = py-tp.y;
				$that.css({
					'background-position-x':tx+'px',
					'background-position-y':ty+'px'
				})
			}
		}).mouseup(function(){
			flag = false;
			reload();
		})
		
		function reload(){
			px = tx;
			py = ty;
		}
	})
}





$.prototype.arrs = function () {
    var that = this;
    var arr = [];
    for (var i = 0; i < that.length; i++) {
        arr.push($(that[i]));
    }
    return arr;
}

思路解释

又是学会一个不常用的事件mousewheel，通过绑定到某个容器上触发鼠标滚动的时候就能进行处理了
拖拽就是记录一个起点和终点，然后将差值变化到背景图的position属性之中就是一个拖拽的效果了
完事，休息

以上是关于每天学一个jquery插件-缩放与拖动的主要内容，如果未能解决你的问题，请参考以下文章