<div style="width: 100%" class="left" @mousewheel.prevent="rollImg">
<img :src="imgSrc" id="img" />
</div>
data() {
return {
zoomD: 1,
imgSrc:
"https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675", //横图
};
},
利用 @mousewheel.prevent滚轮事件获取滚轮向上滚动还是向下滚动
rollImg(e) {
let direction = e.deltaY > 0 ? "down" : "up";
if (direction === "up") {
// 滑轮向上滚动
this.large();
} else {
// 滑轮向下滚动
this.Small();
}
},
large() {
// this.$nextTick(() => {
// 6 数字越大就能放更大
if (this.zoomD < 6) {
this.zoomD += 0.1;
}
document.getElementById(
"img"
).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
// });
},
// 小
Small() {
// this.$nextTick(() => {
// 0.3 数字越小就能放更小
if (this.zoomD > 0.3) {
this.zoomD -= 0.1;
}
// let aa = document.getElementById("img");
// console.log(aa);
document.getElementById(
"img"
).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
// });
},
原文地址:https://blog.csdn.net/m0_63701303/article/details/129167752
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_15049.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。