<template>
<div
ref="testDivDom"
class="test"
style=" position: relative;left: 0px;top: 0px;border:1px dashed black;width: 500px;height: 500px;overflow: hidden"
>
<!-- <img src='../assets/map.jpg' alt="" class='div_img' @mousedown="dragImg" ref='dragImgDom' style='width: 1000px;top: 100px;height: 1000px;position: absolute;left: 100px;'> -->
<div
ref="dragImgDom"
class="div_img"
style="width: 500px;height: 500px;top: 0px;position: absolute;left: 0px;"
@mousedown="dragImg"
@mousewheel="fnWheel"
></div>
</div>
</template>
<script>
export default {
name: 'helloWorld',
data() {
return {
mouseLeft: 0,
mouseTop: 0,
curX: 0,
curY: 0,
dragFlag: false,
wheelFlag: null,
oldWidth: 0,
oldHeight: 0,
scaleX: 1,
scaleY: 1,
newWidth: 0,
newHeight: 0,
x: 0,
y: 0,
bgX: 0,
bgY: 0,
ww: null,
wh: null,
imgw: null,
imgh: null,
scaleSize: null,
testDivDom: null,
dragImgDom: null,
w: null,
h: null,
i: null
}
},
mounted() {
this.testDivDom = this.$refs.testDivDom
this.dragImgDom = this.$refs.dragImgDom
this.ww = parseInt(this.testDivDom.style.width)
this.wh = parseInt(this.testDivDom.style.height)
this.imgw = parseInt(this.dragImgDom.style.width)
this.imgh = parseInt(this.dragImgDom.style.height)
if (this.ww / this.wh < this.imgw / this.imgh) {
this.w = this.ww
this.h = (this.imgh * this.ww) / this.imgw
this.bgX = 0
this.bgY = -(this.h - this.wh) / 2
this.scaleSize = this.ww / this.imgw
} else {
this.w = (this.imgw * this.wh) / this.imgh
this.h = this.wh
this.bgX = -(this.w - this.ww) / 2
this.bgY = 0
this.scaleSize = this.wh / this.imgh
}
this.dragImgDom.style.width = this.w + 'px'
this.dragImgDom.style.height = this.h + 'px'
this.dragImgDom.style.left = this.bgX + 'px'
this.dragImgDom.style.top = this.bgY + 'px'
},
methods: {
getOffset(o) {
var left = 0
var top = 0
while (o != null && o !== document.body) {
top += o.offsetTop
left += o.offsetLeft
o = o.offsetParent
}
return {
left: left,
top: top
}
},
// dragImg(e) {
// this.dragFlag = true;
// let width0 = this.$refs.testDivDom.offsetWidth;
// let height0 = this.$refs.testDivDom.offsetHeight;
// let width = this.$refs.dragImgDom.offsetWidth;
// let height = this.$refs.dragImgDom.offsetHeight;
// const maxX = width - width0;
// const maxY = height - height0;
// if (maxX === 0 || maxY === 0) return;
// let left = e.clientX - parseInt(this.$refs.dragImgDom.offsetLeft);
// let top = e.clientY - parseInt(this.$refs.dragImgDom.offsetTop);
// this.mouseLeft = left;
// this.mouseTop = top;
// console.log(this.curY);
// document.onmousemove = e => {
// if (this.dragFlag) {
// if (e.movementX === 0) {
// if (e.movementY > 0) {
// console.log("往下拖");
// if (this.curY >= maxY) return;
// this.curX = e.clientX - this.mouseLeft;
// this.curY = e.clientY - this.mouseTop>0?0:e.clientY - this.mouseTop;
// } else {
// console.log("往上拖");
// console.log(this.curY,maxY);
// if (-this.curY >= maxY){
// return;
// }else{
// console.log(this.curY,maxY);
// this.curX =e.clientX - this.mouseLeft;
// this.curY = -(e.clientX - this.mouseTop)>maxY? -maxY :e.clientX - this.mouseTop;
// }
// }
// }
// if (e.movementY === 0) {
// if (e.movementX > 0) {
// if (this.curX >= maxX) return;
// this.curX = e.clientX - this.mouseLeft;
// this.curY = e.clientY - this.mouseTop;
// } else {
// if (-this.curX >= maxX) return;
// console.log("往左拖");
// this.curX = e.clientX - this.mouseLeft;
// this.curY = e.clientY - this.mouseTop;
// }
// }
// this.$refs.dragImgDom.style.left = this.curX + "px";
// this.$refs.dragImgDom.style.top = this.curY + "px";
// }
// };
// document.onmouseup = () => {
// this.dragFlag = false;
// };
// },
dragImg(e) {
this.dragFlag = true
const width0 = this.$refs.testDivDom.offsetWidth
const height0 = this.$refs.testDivDom.offsetHeight
const width = this.$refs.dragImgDom.offsetWidth
const height = this.$refs.dragImgDom.offsetHeight
const maxX = width - width0
const maxY = height - height0
if (maxX === 0 || maxY === 0) return
this.mouseLeft = e.clientX - parseInt(this.$refs.dragImgDom.offsetLeft)
this.mouseTop = e.clientY - parseInt(this.$refs.dragImgDom.offsetTop)
// console.log(maxX,maxY);
const mouseLeft = e.clientX - parseInt(this.$refs.dragImgDom.offsetLeft)
const mouseTop = e.clientY - parseInt(this.$refs.dragImgDom.offsetTop)
// this.mouseLeft = this.mouseLeft>maxX?maxX: this.mouseLeft
// this.mouseTop = this.mouseTop>maxY?maxY: this.mouseTop
this.curY = this.$refs.dragImgDom.offsetTop
this.curX = this.$refs.dragImgDom.offsetLeft
document.onmousemove = e => {
if (this.dragFlag) {
if (e.movementX === 0) {
if (e.movementY > 0) {
// console.log("往下拖");
if (this.curY >= 0) return
this.curY = e.clientY - mouseTop > 0 ? 0 : e.clientY - mouseTop
this.curY = this.curY >= -maxY ? this.curY : -maxY
// this.$refs.dragImgDom.style.left = this.curX + "px";
this.$refs.dragImgDom.style.top = this.curY + 'px'
} else {
if (this.curY <= -maxY) return
this.curY =
e.clientY - mouseTop > -maxY ? e.clientY - mouseTop : -maxY
this.curY = this.curY > 0 ? 0 : this.curY
// this.$refs.dragImgDom.style.left = this.curX + "px";
this.$refs.dragImgDom.style.top = this.curY + 'px'
}
}
if (e.movementY === 0) {
if (e.movementX > 0) {
if (this.curX >= 0) return
// console.log(
// `往右拖--e.clientX - mouseLeft${e.clientX - mouseLeft}`
// )
this.curX =
e.clientX - mouseLeft >= 0 ? 0 : e.clientX - mouseLeft
this.curX = this.curX >= -maxX ? this.curX : -maxX
// console.log(this.curX);
this.$refs.dragImgDom.style.left = this.curX + 'px'
// console.log(`curX2ffff ${this.curX}`);
return
} else {
// console.log("往左拖");
// console.log(`往左拖---maxX${maxX}`);
//
// console.log(`curX1zzzz ${this.curX}`);
// console.log(`maxzzzz ${-maxX}`);
if (this.curX <= -maxX) return
// console.log(`往左拖--e.clientX - mouseLeft${e.clientX - mouseLeft}`);
//
this.curX =
e.clientX - mouseLeft >= -maxX ? e.clientX - mouseLeft : -maxX
this.curX = this.curX >= 0 ? 0 : this.curX
// console.log(`curX2zzzz ${this.curX}`);
this.$refs.dragImgDom.style.left = this.curX + 'px'
}
}
// if((e.clientX -mouseLeft))
// console.log(this.curX)
}
}
document.onmouseup = () => {
this.dragFlag = false
}
},
fnWheel(e) {
// 思路：以鼠标为中心实现滚动的话，那么将会鼠标在背景图片（注意我这里是用背景图片的，不是img的）中滚动的时候的位置比率是不会变的
this.wheelFlag = e.wheelDelta > 0
this.oldWidth = this.$refs.dragImgDom.offsetWidth
this.oldHeight = this.$refs.dragImgDom.offsetHeight
const left = parseInt(this.$refs.dragImgDom.offsetLeft)
const top = parseInt(this.$refs.dragImgDom.offsetTop)
this.mouseLeft = e.clientX - left
this.mouseTop = e.clientY - top
if (!this.wheelFlag) {
if (
this.oldWidth <= this.$refs.testDivDom.offsetWidth ||
this.oldHeight <= this.$refs.testDivDom.offsetHeight
) {
return
}
}
// 分别计算出scaleX,scaleY的倍数
this.scaleX = this.mouseLeft / this.oldWidth
this.scaleY = this.mouseTop / this.oldHeight
if (this.wheelFlag) {
this.$refs.dragImgDom.style.width =
this.$refs.dragImgDom.offsetWidth * 1.05 + 'px'
this.$refs.dragImgDom.style.height =
this.$refs.dragImgDom.offsetHeight * 1.05 + 'px'
// if (parseInt(this.$refs.dragImgDom.style.width) > 2500) {
// this.$refs.dragImgDom.style.width = "2500px";
// }
// if (parseInt(this.$refs.dragImgDom.style.height) > 1500) {
// this.$refs.dragImgDom.style.height = "1500px";
// }
} else {
this.$refs.dragImgDom.style.width =
this.$refs.testDivDom.offsetWidth >
this.$refs.dragImgDom.offsetWidth * 0.95
? this.$refs.testDivDom.offsetWidth + 'px'
: this.$refs.dragImgDom.offsetWidth * 0.95 + 'px'
this.$refs.dragImgDom.style.height =
this.$refs.testDivDom.offsetHeight >
this.$refs.dragImgDom.offsetHeight * 0.95
? this.$refs.testDivDom.offsetHeight + 'px'
: this.$refs.dragImgDom.offsetHeight * 0.95 + 'px'
}
// 鼠标为中心的开始点,如果去掉这个将会以左上角开始滚动图片
this.newWidth = this.$refs.dragImgDom.offsetWidth
this.newHeight = this.$refs.dragImgDom.offsetHeight
if (
this.$refs.dragImgDom.offsetWidth === this.$refs.testDivDom.offsetWidth
) {
this.$refs.dragImgDom.style.left = 0
} else {
let nextLeft = this.$refs.dragImgDom.offsetLeft -
this.scaleX * (this.newWidth - this.oldWidth)
nextLeft = nextLeft > 0 ? 0 : nextLeft
const leftIndex = this.$refs.testDivDom.offsetWidth - ((this.$refs.dragImgDom.offsetWidth) - Math.abs(nextLeft))
if (leftIndex > 0) {
this.$refs.dragImgDom.style.left = nextLeft + leftIndex + 'px'
} else {
this.$refs.dragImgDom.style.left = nextLeft + 'px'
}
}
if (
this.$refs.dragImgDom.offsetHeight === this.$refs.testDivDom.offsetHeight
) {
this.$refs.dragImgDom.style.top = 0
} else {
let nextTop = this.$refs.dragImgDom.offsetTop -
this.scaleY * (this.newHeight - this.oldHeight)
nextTop = nextTop > 0 ? 0 : nextTop
const topIndex = this.$refs.testDivDom.offsetHeight - (this.$refs.dragImgDom.offsetHeight - Math.abs(nextTop))
if (topIndex > 0) {
this.$refs.dragImgDom.style.top = nextTop + topIndex + 'px'
} else {
this.$refs.dragImgDom.style.top = nextTop + 'px'
}
}
}
}
}
</script>
<style scoped>
.div_img {
background: url("../assets/img/login/timg.jpg") center/100% 100%;
/* background-position: 0 0; */
}
</style>
