Vue实现商品详情鼠标移动+放大显示图片细节

效果图

鼠标浮动放大细节图效果

代码实现

<template>
<div>
<div style="position: relative;" class="box">
<img @mousemove="updatePositions"
src="https://img.pddpic.com/gaudit-image/2023-07-09/36b632c77506c42d1bc206924a054310.jpeg" alt="" />
<div v-if="moveVisiable" class="move" @mouseout="()=>moveVisiable = false" style="" @mousemove="updatePosition"
:style="draggableStyle"></div>
<div class="preview" v-if="moveVisiable">
<img :style="detailImageStyle"
src="https://img.pddpic.com/gaudit-image/2023-07-09/36b632c77506c42d1bc206924a054310.jpeg" width="800px"
height="800px" alt="" />
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
top: 0,
left: 0,
offset: {
x: 200,
y: 200
},
moveVisiable: false,
animationFrameId: null,
}
},
computed: {
detailImageStyle() {
return {
transform: `translate(${-this.offset.x}px, ${-this.offset.y}px)`
};
},
draggableStyle() {
return {
transform: `translate(${this.offset.x}px, ${this.offset.y}px)`
};
}
},
methods: {
name() {
},
updatePositions(event) {
// console.log('event: ',event);
const {
clientX,
clientY
} = event;
const x = event.clientX - 50;
const y = event.clientY - 50;
this.offset = {
x: Math.min(Math.max(x, 0), 300),
y: Math.min(Math.max(y, 0), 300)
};
this.moveVisiable = true;
},
updatePosition(event) {
const {
clientX,
clientY
} = event;
console.log('clientY: ', clientY, 'clientX: ', clientX);
if (!this.animationFrameId) {
this.animationFrameId = requestAnimationFrame(() => {
const x = event.clientX - 50;
const y = event.clientY - 50;
this.offset = {
x: Math.min(Math.max(x, 0), 300),
y: Math.min(Math.max(y, 0), 300)
};
// this.offset = {
// x:x<0?0:x,
// y:y>300?300:y
// };
this.animationFrameId = null;
});
}
}
},
}
</script>
<style scoped>
.box {
height: 400px;
width: 400px;
}
.move {
cursor: move;
width: 100px;
height: 100px;
background-color: #faebd7a1;
position: absolute;
top: 0px;
border: 1px dashed orange;
}
.preview {
overflow: hidden;
position: absolute;
width: 600px;
height: 600px;
left: 400px;
top: 0;
}
</style>
posted @   天葬  阅读(154)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示