vue图片放大镜组件,
放大镜效应在很多购物网站都能看到。本文主要介绍vue3实现淘宝放大镜效果的示例代码。文中详细介绍了示例代码，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
目录
实现效果实现思路完成小图框、蒙版和大图框的布局实现鼠标移动到小图框显示蒙版和大图框实现鼠标移动蒙版在小图框内移动完整代码总结
实现效果
实现思路
实现淘宝放大镜的效果需要四个步骤。
1.完成小图片框、蒙版、大图片框的布局。
2.将鼠标移动到小图片框显示遮罩和大图片框。
3.实现鼠标移动在小图片框中移动。
4.认识到蒙版的移动范围不能超过小图框，移动的时候会带动大图移动。
完成小图盒子、遮罩、大图盒子布局
我的布局小图片框包裹图片，蒙版，大图片框。
图中的小方框表示相对定位。蒙版、大图框、大图都是绝对定位的(大图没有定位是动不了的)。设置透明度的遮罩。只要能达到效果。
实现鼠标移动到小图盒子显示遮罩和大图盒子
图绑定mouseout鼠标移入事件和mouseover鼠标移出事件的小框。每次触发事件时切换状态。
实现鼠标移动遮罩在小图盒子移动
图小框绑定mousemove鼠标移动事件。鼠标在页面上的x坐标减去缩略图框的offersetLeft意味着鼠标在框的左侧。这是要移动的遮罩的坐标。如果你想让鼠标在蒙版的中间，就把它除以2。y坐标也是如此。
遮罩的移动范围不能超过小图框，移动时会带动大图移动。
判断边界值，如果小于等于0，那么mask左边等于0，x的有界值实际上是小方框的宽度减去mask的宽度。同样，Y轴是小盒子的高度减去蒙版的高度。
带动大局动起来是有比例关系的。大图移动距离=掩膜移动距离*大框最大移动距离/x掩膜最大移动距离，
完整代码
模板
差异
tb-booth
@mouseover=onMouseOver
@mouseout=onMouseOut
@mousemove=onMouseMove
ref=boothRef
图片
src= https://img . alicdn . com/img extra/i3/1917047079/o1cn 01 lkg 2 pf 22 aeui 1 owve _！ 1917047079.png_430x430q90.jpg
/
div class= mask ref= mask v-show= box show /
div class= big-img _ box ref= bigImgBox v-show= box show
图片
大-img
ref=bigImg
src= https://img . alicdn . com/img extra/i3/1917047079/o1cn 01 lkg 2 pf 22 aeui 1 owve _！1917047079.png
/
/div
/div
/模板
脚本
从“vue”导入{ reactive，toRefs，ref }；
导出默认值{
setup() {
const boothRef=ref(null)；
const mask=ref(null)；
const big img=ref(null)；
const bigImgBox=ref(null)；
恒定状态=反应({
boxShow:假
});
const onMouseOver=()={
state.boxShow=true
};
const onMouseOut=()={
state.boxShow=false
};
const onMouseMove=(e)={
设x=e . pagex-boothref . value . offset left；
设y=e . pagey-boothref . value . offsettop；
设maskX=x-mask . value . offsetwidth/2；
设maskY=y-mask . value . offset height/2；
//掩模的最大x移动距离
let mask xmax move=boothref . value . offsetwidth-mask . value . offsetwidth；
let maskYMaxMove=boothref . value . offset height-mask . value . offset height；
让bigImgXMaxMove=
bigimgbox . value . offsetwidth-bigimg . value . offsetwidth；
让bigImgYMaxMove=
bigimgbox . value . offset height-bigimg . value . offset height；
if (maskX=0) {
maskX=0；
} else if (maskX=maskXMaxMove) {
maskX=maskXMaxMove
}
if (maskY=0) {
maskY=0；
} else if (maskY=maskYMaxMove) {
maskY=maskYMaxMove
}
mask . value . style . left=maskX px ；
mask . value . style . top=maskY px ；
//大图移动距离=掩膜移动距离*大框最大移动距离/x掩膜最大移动距离
let bixImgXMove=(maskX * bigImgXMaxMove)/maskXMaxMove；
let bixImgYMove=(maskY * bigImgYMaxMove)/maskYMaxMove；
bigimg。价值。风格。left=bixImgXMove px
bigimg。价值。风格。top=bixImgYMove px
};
返回{
.toRefs(州),
boothRef，
面具，
bigImg，
bigImgBox，
onMouseOver，
onMouseOut，
onMouseMove，
};
},
};
/脚本
样式范围。t B-展位{
宽度：430像素
高度：430像素
位置：相对；
边框：1px实心# cccccc
}。面具{
位置：绝对；
top:0；
左：0;
宽度：200像素
高度：200像素
背景色：rgb(61，110，206)；
不透明度：0.5;
光标：移动；
}。big-img_box {
位置：绝对；
top:0；
左：530像素
宽度：500像素
高度：500像素
背景色：# fff
边框：1px实心# cccccc
溢出：隐藏；
}。big-img {
位置：绝对；
左：0;
top:0；
}
/风格
总结
鼠标悬停、鼠标移出、鼠标移动事件的运用虚拟展示显示隐藏vue3获取裁判员两种方式其中一种通过设置创建裁判员响应式数据，暴露出去赋予裁判员元素的值。第二种是getCurrentInstance方法offsetWidth、offsetHeight、offsetLeft、offsetTop、pageX、pageY的概念到此这篇关于vue3实现淘宝放大镜效果的示例代码的文章就介绍到这了，更多相关vue3淘宝放大镜内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。