foreword
In fact, it is very simple to realize the function, which is to monitor the mouse wheel scrolling event on a picture, and then realize the zooming of the picture according to whether it is scrolled up or down.
Effect:
Note: This picture uses the picture of the article "Comics | Interesting Understanding of Assignment, Deep and Light Copy", and there is no infringement problem.
Implementation ideas
In js, onmousewheel is a mouse wheel scrolling event, which can be triggered to change the size of the picture and realize the function of zooming in and out of the picture. But here we are vue, so we use: mousewheel. @mousewheel to monitor mouse wheel scrolling.
<div id="productDrawing">
<div class="alert">温馨提示：查看图纸时滚动鼠标可以放大缩小</div>
<div class="productDrawing_Img" @mousewheel="handerPictu">
<img
id="oImg"
src="../images/1.png"
alt=""
:style="{ width: imgWidth, height: imgHeight }"
/>
</div>
</div>
Then you can write your own business logic in it.
handerPictu(e) {
const img = document.getElementById("oImg");
this.imgWidth = img.offsetWidth || img.width || img.clientWidth;
this.imgHeight = img.offsetHeight || img.height || img.clientHeight;
if (e.deltaY > 0) {
console.log("鼠标向下滚动，图片缩小");
this.imgWidth = `${
this.imgWidth - 10}px`;
this.imgHeight = `${
this.imgHeight - 10}px`;
} else {
console.log("鼠标向上滚动，图片放大");
this.imgWidth = `${
this.imgWidth + 10}px`;
this.imgHeight = `${
this.imgHeight + 10}px`;
}
// this.imgWidth = `${this.imgWidth}px`;
console.log(this.imgWidth, this.imgHeight, "hou");
},
},
When the mouse scrolls the wheel on this picture, it will be monitored by this time, and then you can write your own logic code.
Simply zooming in and zooming in the picture is not enough to use anti-shake and throttling, but if you need to request the background, remember to do anti-shake.
Full page code:
Available as a component:
<template>
<div id="productDrawing">
<div class="alert">温馨提示：查看图纸时滚动鼠标可以放大缩小</div>
<div class="productDrawing_Img" @mousewheel="handerPictu">
<img
id="oImg"
src="../images/1.png"
alt=""
:style="{ width: imgWidth, height: imgHeight }"
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
imgWidth: "auto",
imgHeight: "auto",
};
},
mounted() {},
methods: {
handerPictu(e) {
const img = document.getElementById("oImg");
console.log(img.offsetWidth, img.width, img.clientWidth);
this.imgWidth = img.offsetWidth || img.width || img.clientWidth;
this.imgHeight = img.offsetHeight || img.height || img.clientHeight;
if (e.deltaY > 0) {
console.log("鼠标向下滚动，图片缩小");
this.imgWidth = `${this.imgWidth - 10}px`;
this.imgHeight = `${this.imgHeight - 10}px`;
} else {
console.log("鼠标向上滚动，图片放大");
this.imgWidth = `${this.imgWidth + 10}px`;
this.imgHeight = `${this.imgHeight + 10}px`;
}
// this.imgWidth = `${this.imgWidth}px`;
console.log(this.imgWidth, this.imgHeight, "hou");
},
},
};
</script>
<style scoped lang="scss">
#productDrawing {
width: 580px;
height: 480px;
border: 1px solid #edf1f5;
overflow: hidden;
.alert {
height: 30px;
font-size: 12px;
line-height: 30px;
border-radius: 2px;
color: #9e7700;
text-align: center;
background: linear-gradient(90deg, #ffffff 0%, #fff7d3 50%, #fcfcfc 100%);
}
.productDrawing_Img {
width: 580px;
height: 450px;
overflow: hidden;
display: table-cell;
vertical-align: middle;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
}
}
}
</style>
Related knowledge sharing
mousewheel
mousewheel mouse wheel, it is obvious that events can be triggered by moving the mouse wheel, but events cannot be triggered by dragging the scroll bar with the cursor.
wheelDelta, wheelDeltaX, and wheelDeltaY values
This attribute value is an abstract value representing how far the wheel has turned. Positive if the wheel is spinning away from the user, negative otherwise. This means that the delta value symbol is different from the symbol wheel for DOM level 3 events. However, the number of these values does not mean the same across browsers. See explanation below for details.
IE and Opera (Presto) only support attributes and do not support horizontal scrolling.
The wheelDeltaX attribute value indicates the attribute value along the horizontal axis. When the user scrolls the device to the right, the value is negative. Otherwise, that is, if to the left, the value is positive.
The wheelDeltaY property value indicates the property value along the vertical axis. The sign of the value corresponds to the wheel delta property value.
There is a Firefox mouse wheel compatibility issue.
onmousewheel
onmousewheel event: It will be triggered when the mouse wheel is scrolling to judge whether the mouse wheel is scrolling, but Firefox browser does not support this property. DOMMouseScroll can bind scrolling events for Firefox, and it needs to be bound through the addEventListener function.
event.wheelDellta: It can be used to obtain the scrolling direction of the mouse. For the obtained value, only positive and negative values are considered. Scrolling up is a positive value, and scrolling down is a negative value. Firefox browser does not support this method, you need to use event.detail to get the scrolling direction of the scroll wheel, up is a negative value, and down is a positive value.
When the page has a scroll bar, the scroll bar will scroll with the scroll wheel of the mouse. This is the default behavior of the browser. Return false can be used to cancel the default behavior of the browser.
There is a Firefox mouse wheel compatibility issue.
Reference link:
https://blog.csdn.net/Fantasc/article/details/119619584
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousewheel_event