js 放大缩小(滚动)
<template>
<div>
<div style="width: 100px;height: 100px;"></div>
<!-- ondragstart="return false" 禁止浏览器默认拖动行为 -->
<div class="image" @mousewheel="mousewheel">
<img
ondragstart="return false"
ref="imgRef"
@mousedown="mousedown"
@mouseup="mouseup"
@mouseleave="mouseleave"
@mousemove="mousemove"
:style="{
top: getTop,
left: getLeft,
width: getWidth,
height: getHeight,
}"
src="@/assets/images/homePageImg/pic.png"
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
//父框的大小和子框的大小尽量相同
//图片父框坐标(x,y)
fatherX: 500,
fatherY: 500,
//父框大小
fatherWidth: 500,
fatherHeight: 500,
//图片相对父框位置
top: 0,
left: 0,
//初始图片大小
width: 500,
height: 500,
//图片宽高比
ratio: 1,
//放大缩小比例(即每次放大缩小的px)
canvasBgRatio: 10,
//图片是否可以移动
isImgMove: false,
//鼠标按下时坐标
mousedownX: 0,
mousedownY: 0,
mousedownLeft: 0,
mousedownTop: 0,
}
},
created() {
//图片宽高比
this.ratio = this.width / this.height
},
computed: {
getLeft: function() {
return this.left + 'px'
},
getTop: function() {
return this.top + 'px'
},
getWidth: function() {
return this.width + 'px'
},
getHeight: function() {
return this.height + 'px'
},
//图片当前坐标
imgX: function() {
return this.fatherX + this.left
},
imgY: function() {
return this.fatherY + this.top
},
},
methods: {
//鼠标按压时间
mousedown(param) {
console.log('按下')
this.mousedownX = param.clientX
this.mousedownY = param.clientY
this.mousedownLeft = this.left
this.mousedownTop = this.top
this.isImgMove = true
},
mouseup(param) {
console.log('松开')
this.isImgMove = false
},
mouseleave(param) {
console.log('离开')
this.isImgMove = false
},
mousemove(param) {
if (this.isImgMove) {
console.log('移动')
//鼠标移动后坐标,即当前坐标
let mouseX = param.clientX
let mouseY = param.clientY
//计算图片相对父框位置的变化
let tempLeft = this.mousedownLeft - (this.mousedownX - mouseX)
if (tempLeft < 0 && tempLeft + this.width > this.fatherWidth) {
this.left = tempLeft
}
let tempTop = this.mousedownTop - (this.mousedownY - mouseY)
if (tempTop < 0 && tempTop + this.height > this.fatherHeight) {
this.top = tempTop
}
}
},
//鼠标滚轮事件
mousewheel(param) {
//如果处于移动状态则不能放大缩小
if (this.isImgMove) {
return false
}
//获取鼠标坐标
let mouseX = param.clientX
let mouseY = param.clientY
// param.deltaY鼠标滚轮上滚为负数,下滚为正数,上滚放大图片,下滚缩小
//放大
if (param.deltaY < 0) {
this.magnify(mouseX, mouseY)
}
//缩小(最小为初始值)
if (
param.deltaY > 0 &&
this.width > this.fatherWidth &&
this.height > this.fatherHeight
) {
this.shrink(mouseX, mouseY)
}
},
//放大
magnify(mouseX, mouseY) {
//计算图片的宽高
let oldWidth = this.width
let oldHeight = this.height
this.height = this.height + this.canvasBgRatio
this.width = this.height * this.ratio
//鼠标组坐标和图片坐标距离
let miWidth = mouseX - this.imgX
let miHeight = mouseY - this.imgY
//计算图片相对父框位置的变化
this.left = this.left - ((this.width - oldWidth) / oldWidth) * miWidth
this.top = this.top - (this.canvasBgRatio / oldHeight) * miHeight
},
//缩小
shrink(mouseX, mouseY) {
//计算图片的宽高
let oldWidth = this.width
let oldHeight = this.height
this.height = this.height - this.canvasBgRatio
this.width = this.height * this.ratio
// 图片父框坐标和图片坐标距离
let mfWidth = this.fatherX - this.imgX
let mfHeight = this.fatherY - this.imgY
//计算图片相对父框位置的变化
this.left =
this.left +
((oldWidth - this.width) / (oldWidth - this.fatherWidth)) * mfWidth
this.top =
this.top +
(this.canvasBgRatio / (oldHeight - this.fatherHeight)) * mfHeight
},
},
}
</script>
<style scoped>
.image {
position: absolute;
border: 1px solid #aa0000;
width: 500px;
height: 500px;
overflow: hidden;
cursor: pointer;
}
.image img {
position: absolute;
width: 500px;
height: 500px;
}
</style>