<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title></title>
<style>
.imgBox {
width: 960px;
height: 540px;
background: url("./timg.jpg") no-repeat;
background-size: 960px 540px;
background-position: 0 0;
}
</style>
</head>
<body>
<div id="app">
<div class="imgBox" ref="drawImg" @mousewheel="mousewheel" @mousemove="mousemove" @mousedown="mousedown" @mouseup="mouseup"></div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'hello vue.js.',
mouseUpFlag: false,
scrollNum: 1, // 缩放倍数
height: 540,
width: 960,
},
watch: {
},
computed: {
},
created() {
// this.getBox()
},
mounted() {
},
methods: {
// 滚轴滚动
mousewheel(e) {
const flag = e.wheelDelta > 0
if (!flag && this.scrollNum === 1) return
if (this.$refs.drawImg) {
this.scrollNum = flag ? this.scrollNum + 0.3 : this.scrollNum - 0.3
if (this.scrollNum < 1) this.scrollNum = 1
const scrollHegiht = this.scrollNum * this.height
const scrollWidth = this.scrollNum * this.width
let positionX = this.tranPosition(this.$refs.drawImg.style.backgroundPositionX)
let positionY = this.tranPosition(this.$refs.drawImg.style.backgroundPositionY)
const maxX = scrollWidth - this.width
const maxY = scrollHegiht - this.height
console.log(positionX, positionY);
const x = (this.width - scrollWidth) / 2
const y = (this.height - scrollHegiht) / 2
// const x = -((this.scrollNum - 1) * this.width / 2 - positionX)
// const y = -((this.scrollNum - 1) * this.height / 2 - positionY)
this.$refs.drawImg.style.backgroundPosition = `${x}px ${y}px`
this.$refs.drawImg.style.backgroundSize = `${scrollWidth}px ${scrollHegiht}px`
}
},
// 鼠标移动
mousemove(e) {
if (this.mouseUpFlag && this.scrollNum > 1 && this.$refs.drawImg) {
let positionX = this.tranPosition(this.$refs.drawImg.style.backgroundPositionX)
let positionY = this.tranPosition(this.$refs.drawImg.style.backgroundPositionY)
let backgroundSize = this.$refs.drawImg.style.backgroundSize
const scrollHegiht = this.scrollNum * this.height
const scrollWidth = this.scrollNum * this.width
const maxX = scrollWidth - this.width
const maxY = scrollHegiht - this.height
const baseMile = 10
if (e.movementX === 0) {
if (e.movementY > 0) {
console.log('往下拖');
if (positionY >= maxY) return
positionY = positionY + baseMile > 0 ? 0 : positionY + baseMile
this.$refs.drawImg.style.backgroundPosition = `${positionX}px ${positionY}px`
} else {
console.log('往上拖');
if (-positionY >= maxY) return
positionY = -(positionY - baseMile) > maxY ? -maxY : positionY - baseMile
this.$refs.drawImg.style.backgroundPosition = `${positionX}px ${positionY}px`
}
}
if (e.movementY === 0) {
if (e.movementX > 0) {
if (positionX >= maxX) return
console.log('往右拖');
positionX = positionX + baseMile > 0 ? 0 : positionX + baseMile
console.log(positionX);
console.log(maxX);
this.$refs.drawImg.style.backgroundPosition = `${positionX}px ${positionY}px`
} else {
if (-positionX >= maxX) return
console.log('往左拖');
positionX = -(positionX - baseMile) > maxX ? -maxX : positionX - baseMile
this.$refs.drawImg.style.backgroundPosition = `${positionX}px ${positionY}px`
}
}
// console.log(maxX, maxY);
// console.log(positionX);
// console.log(positionY);
}
},
tranPosition(str) {
let pxNum = str.replace('px', '')
return Number(pxNum)
},
// 鼠标摁下
mousedown(e) {
this.mouseUpFlag = true
},
// 鼠标放开
mouseup(e) {
this.mouseUpFlag = false
},
},
});
</script>
</html>
