因?yàn)楣卷?xiàng)目有一個(gè)需求悴晰，要需要在一個(gè)div中去設(shè)置一個(gè)背景圖片，并且還要再div中使用echarts畫(huà)圖逐工，因此需要將一個(gè)div縮放以及拖動(dòng)铡溪。
要實(shí)現(xiàn)以上功能，開(kāi)起來(lái)好像有一點(diǎn)復(fù)雜泪喊，實(shí)際上很簡(jiǎn)單棕硫，創(chuàng)建兩個(gè)div，只需要設(shè)置好子div的mousemove袒啼、mousedown哈扮、mouseup、mousewheel事件即可蚓再。
廢話不多說(shuō)直接上代碼(復(fù)制過(guò)去即可用)：
<!DOCTYPE html>
<html>
<body>
<div id="father" style="width: 600px; height: 600px; margin-left: auto;margin-right: auto;overflow: hidden;border: #000 solid 1px;">
<div id="showdiv" style="width:600px; height: 600px; background: url(test.png); background-size: 100% 100%;background-repeat: no-repeat;">
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script>
// js代碼
var old_x = 0;
var old_y = 0;
var leftkeydown = 0;
var old_offset = {left: 0, top: 0}
function listen_mousewheel(event, delta, deltaX, deltaY) {
var e = window.event || event
e.preventDefault()
var x_off = event.pageX - $(this).offset().left
var y_off = event.pageY - $(this).offset().top
var height = $(this).height()
var width = $(this).width()
var offset = $(this).offset()
if (delta == 1) {
var new_x = width * 1.1
var new_y = height * 1.1
} else {
var new_x = width * 0.9
var new_y = height * 0.9
}
$(this).height(new_y)
$(this).width(new_x)
$(this).offset({
left: offset.left + (x_off - (x_off / width * new_x)),
top: offset.top + (y_off - (y_off / height * new_y))
})
}
function listen_keydownmove(event) {
if (leftkeydown) {
var new_x = event.pageX - $(this).offset().left
var new_y = event.pageY - $(this).offset().top
$(this).offset({left: old_offset.left + (new_x - old_x), top: old_offset.top + (new_y - old_y)})
old_offset = $(this).offset()
}
}
function listen_mouseup(event) {
old_x = 0;
old_y = 0;
leftkeydown = 0;
old_offset = {left: 0, top: 0}
$(this).unbind('mousemove')
$(this).unbind('mouseup')
}
function listen_mousedown(event) {
if (event.button == 0) {
old_x = event.pageX - $(this).offset().left
old_y = event.pageY - $(this).offset().top
leftkeydown = 1;
old_offset = $(this).offset()
$(this).mousemove(listen_keydownmove)
$(this).mouseup(listen_mouseup)
}
}
$(function () {
$('#showdiv').mousewheel(listen_mousewheel)
$('#showdiv').mousedown(listen_mousedown)
})
</script>
</body>
</html>
效果圖：
剛加載的圖片
鼠標(biāo)跟隨放大后
鼠標(biāo)選擇移動(dòng)后
