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>