vue图片放大镜组件,vue放大缩小组件
本文主要详细介绍了利用Vue实现商品放大镜效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享Vue实现放大镜效果的具体代码，供大家参考。具体内容如下。
一、前言
在这个电商繁荣的时代，各种直播或者自主购物，我们进一步检查了自己对商品的知识和理解的细节，发现自己的商品是可以放大查看的，于是心血来潮用前端技术Vue框架写了一个类似放大镜的功能。
二、实现思路
对于原图的显示空间(左)，可以把原图的img改成canvas，保护图片线条。
当跟随鼠标移动时，显示放大的指示区域(鼠标层覆盖的顶部),并且在显示层覆盖区域中选择放大的显示空间(右侧)。
三、效果展示
四、具体实现逻辑代码
模板(记得改变图像路径)
模板
差异
div class=left
img class= leftImg src=././src/assets/curry.jpg alt= /
！-鼠标层封面-
div v-show= top show class= top :style= top style /div
！-顶层用透明盖覆盖原始图像的整个空间-
差异
面具商店
@mouseenter=enterHandler
@mousemove=moveHandler
@mouseout=outHandler
/div
/div
div v-show=rShow class=right
图片
:style=r_img
正确的
src=././src/assets/curry.jpg
alt=
/
/div
/div
/模板
样式css
样式范围
/*放大图片，通过定位将左上角定位到(0，0)*/。正确{
显示：内嵌-块；
宽度：800px
高度：800px
位置：绝对；
top:0；
左：0；
}/*放大右侧区域图片*/。右{
左边距：412px
宽度：400px
高度：400px
边框：1px纯红；
位置：相对；
溢出：隐藏；
}/*顶层封面*/。面具商店{
宽度：400px
高度：400px
位置：绝对；
z指数：1；
top:0；
左：0；
}/*图层覆盖，通过定位将左上角定位到(0，0)*/。顶部{
宽度：200px
高度：200px
背景色：浅珊瑚色；
不透明度：0.4；
位置：绝对；
top:0；
左：0；
}/*原始图像的显示*/。左侧{
宽度：400px
高度：400px
显示：内嵌-块；
}/*原图片的容器*/。左侧{
宽度：400px
高度：400px
边框：1px纯色蓝绿色；
浮动：左；
位置：相对；
}
/风格
脚本核心js
脚本
导出默认值{
data() {
返回{
topStyle: { transform: }，
r_img: {}，
topShow:假的，
rShow:假，
};
},
方法：{
//鼠标进入原始图像空间功能
enterHandler() {
//显示图层覆盖和放大的空间
this . top show=true；
this.rShow=true
},
//鼠标移动功能
moveHandler(事件){
//鼠标的坐标位置
设x=event.offsetX
设y=event.offsetY
//图层封面左上角的坐标位置，并加以限制：不能超过原图像区域的左上角。
设topX=x - 100 0？0:x-100；
设topY=y - 100 0？0:y-100；
//再次限制图层覆盖的位置，保证图层覆盖只能在原绘图区域的空间内。
if (topX 200) {
topX=200
}
if (topY 200) {
topY=200
}
//通过变换移动控件
this . top style . transform=` translate($ { topX } px，$ { topY } px)`；
this . r _ img . transform=` translate(-$ { 2 * topX } px，-$ { 2 * topY } px)`；
},
//鼠标移出功能
outHandler() {
//控制图层覆盖和放大空间的隐藏。
this . top show=false；
this.rShow=false
},
},
};
/脚本
五、总结思考
本来我给左边的原图像容器加了三个鼠标事件，结果一直出现问题。
1.我添加了一个覆盖鼠标区域的透明maskTop，让这个放大镜完全实现。如果不添加这个maskTop图层盖，当我的鼠标指针进入原图像区域空间时，鼠标图层盖不会随鼠标移动，而是在鼠标移动时高频振动，右侧放大的区域空间不会平滑变化。
2.如果不添加maskTop图层覆盖，当我的鼠标移动到原图的空间时，mousemove鼠标移动事件只执行一次，好像是因为鼠标标记图层覆盖挡住了。
3.我之前尝试过动态确定鼠标层封面的初始位置，放在mouseenter事件中。结果mouseenter事件被异常执行了很多次，就像变成了mousemove事件一样。
我看过其他的放大镜套，都不用加masktop，顶盖，希望路过的大佬们能帮我解惑。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。