jq 元素放大缩小 鼠标拖拽
————项目需要零件图可放大缩小，并且鼠标拖拽，写个demo尝试下
#%&……%￥#&**……%￥#@#￥%……#￥%……
下面是demo源码，复制即可使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fei demo</title>
<style>
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div style="background-color: black;width: 500px;height: 500px;margin: auto;">
<div style="background-color: white;width: 100px;height: 100px;top:10px;position: absolute;" class="slider"
id="ImgboxPos"></div>
<!--
依山傍水房数间，行也安然，坐也安然。
布衣得暖胜丝锦，长也可穿，短也可穿。
稀粥淡饭饱三餐，早也可餐，晚也可餐。
无事闲游村市栈，棋也玩玩，牌也玩玩。
雨过于晴上小船，今也谈谈，古也谈谈。
夜归儿女笑灯前，饭在一边，菜在一边。
不是神仙，胜似神仙。
依山傍水房数间，行也安然，坐也安然。
一头耕牛半顷田，收也凭天，荒也凭天。
雨过天晴驾小船，鱼在一边，酒在一边。
路逢骚客问诗篇，好也几言，歹也几言。
布衣得暖胜丝棉，新也可穿，旧也可穿。
粗茶淡饭饱三餐，早也香甜，晚也香甜。
夜归挚友话灯前，今也谈谈，古也谈谈。
一觉睡到日三竿，不是神仙，胜似神仙！
-->
</div>
<script src="https://cdnjs.cloud/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function () {
var size = 0;
$(document).on("mousewheel DOMMouseScroll", function (e) {
var img = $("#ImgboxPos"); //div
var oWidth = img.width(); //取得图片的实际宽度
var oHeight = img.height(); //取得图片的实际高度
console.log(oWidth, oHeight)
var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
if (delta > 0) {
// 向上滚
console.log("wheelup");
size = 1.1
} else if (delta < 0) {
// 向下滚
console.log("wheeldown");
size = 0.8
}
img.width(oWidth * size);
img.height(oHeight * size);
});
$('.slider').mousedown(function (e) {
var TopPX = $('.slider').offset().top
var LeftPX = $('.slider').offset().left
// 盒子距离浏览器
// console.log(TopPX,LeftPX)
// console.log(e.clientX,e.clientY)
var xx = e.clientX - LeftPX
var yy = e.clientY - TopPX
console.log(TopPX, e.clientX, xx)
console.log(LeftPX, e.clientY, yy)
$(document).mousemove(function (e) {
$('.slider').offset({
left: e.pageX - xx,
top: e.pageY - yy
})
})
$('.slider').mouseup(function () {
$(document).off('mousemove')
})
})
})
</script>
</body>
</html>