vue实现图片通过鼠标滚轮放大缩小,并且能够拖动
<template><!-- 实现鼠标缩放图片并拖拽功能 --><div class="box" id="bigimg" @mousewheel="bbimg($event)"><img id="img" border="0" src="../../static/img/bg.jpg"></div></template><
·
html代码
<template>
<div class="box" id="bigimg" @mousewheel="bagimg($event)">
<img id="img" border="0" src="../../static/img/bg.jpg">
</div>
</template>
css代码
.box {
border: 1px solid red;
position: relative;
width: 500px;
height: 600px;
margin: 30px auto;
overflow: hidden;
}
img {
position: absolute;
height: 100%;
width: auto;
cursor: move;
}
js代码
export default {
data() {
return {
params: {
zoomVal: 1,
left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false
},
}
},
mounted() {
this.startDrag(document.getElementById("img"), document.getElementById("img"))
},
methods: {
bagimg(e) {
var e = document.getElementById('img')
this.params.zoomVal += event.wheelDelta / 1200;
if (this.params.zoomVal >= 0.2) {
e.style.transform = "scale(" + this.params.zoomVal + ")";
} else {
this.params.zoomVal = 0.2;
e.style.transform = "scale(" + this.params.zoomVal + ")";
return false;
}
},
getImgCss(e, key) {
return e.currentStyle ? e.currentStyle[key] : document.defaultView.getComputedStyle(e, false)[key];
},
startDrag(bar, target, callback) {
let that = this
if (that.getImgCss(target, "left") !== "auto") {
that.params.left = that.getImgCss(target, "left");
}
if (that.getImgCss(target, "top") !== "auto") {
that.params.top = that.getImgCss(target, "top");
}
bar.onmousedown = function(event) {
that.params.flag = true;
if (!event) {
event = window.event;
bar.onselectstart = function() {
return false;
}
}
let e = event;
that.params.currentX = e.clientX;
that.params.currentY = e.clientY;
};
document.onmouseup = function() {
that.params.flag = false;
if (that.getImgCss(target, "left") !== "auto") {
that.params.left = that.getImgCss(target, "left");
}
if (that.getImgCss(target, "top") !== "auto") {
that.params.top = that.getImgCss(target, "top");
}
};
document.onmousemove = function(event) {
let e = event ? event : window.event;
if (that.params.flag) {
let nowX = e.clientX,
nowY = e.clientY;
let disX = nowX - that.params.currentX,
disY = nowY - that.params.currentY;
target.style.left = parseInt(that.params.left) + disX + "px";
target.style.top = parseInt(that.params.top) + disY + "px";
if (typeof callback == "function") {
callback((parseInt(that.params.left) || 0) + disX, (parseInt(that.params.top) || 0) + disY);
}
if (event.preventDefault) {
event.preventDefault();
}
return false;
}
}
},
}
}
更多推荐
已为社区贡献7条内容
所有评论(0)