vue图片放大镜,

　　放大镜在很多购物网站都能看到。本文主要实现两次固定放大。当鼠标进入左图片区域时，显示遮罩层，当鼠标离开时，遮罩层被隐藏。有兴趣的可以看看。

　　需要的效果是：放大两倍，鼠标进入左图片区域时，显示遮罩层，离开时，隐藏遮罩层。

　　css中的光标

鼠标跟随效果如何实现： (子绝父相)绝对定位 + 修改top,left控制移动

　　在@vueuse中，有一个工具方法：useMouseInElement

　　模板

　　div ref=target

　　h1你好世界/h1

　　/div

　　/模板

　　脚本

　　从“vue”导入{ ref }

　　从“@vueuse/core”导入{ useMouseInElement }

　　导出默认值{

　　setup() {

　　const target=ref(空)

　　const { x，y，is outside }=use mouse inelement(target)

　　返回{ x，y，isOutside }

　　}

　　}

　　/脚本

　　这是VueUse官网上的用法。最后，别忘了return { target } 我一开始没return target,x,y,isOutside的值是 0,0,false,并不是变化的值。。

鼠标的位置和遮罩的位置之间的关系：

　　class= layer :style= layer style /div//这是遮罩层。

　　Setup(){ //下面是实现鼠标跟随的代码

　　const layerStyle=reactive({

　　顶部：“0px”，

　　左：“0px”

　　})

　　//监听三个值的变化。watch的第一个参数是一个数组。

　　手表([elementX，elementY，isOutside]，()={

　　//layer style . left=elementx . value/2 px

　　//layer style . top=element y . value/2 px

　　设top=elementY.value - 100

　　let left=elementX.value - 100

　　//为掩码元素分配位置

　　if (top 0) top=0

　　if (top 200) top=200

　　if (left 0) left=0

　　如果(左200)左=200

　　layerStyle.top=top px

　　layerStyle.left=left px

　　})

　　返回{ elementX，elementY，isOutside，target，layerStyle }

　　}

　　遮罩区域不能超出顶部左侧的父框。我注释掉了两行代码。为什么我不能把它们写在一起？因为后来，当我需要添加判断的时候，我会发现，当我在判断之后添加px的时候，你会发现无从下手。上面分开写，top和left只是一个数值。计算完成后，我会添加单位。

　　放大效果如何实现：

　　css中有一个背景大小属性。第一个参数是指宽度，第二个参数是指高度，可以是放大图片。

　　本身是 400 *400,那放大两倍就是 800*800

　　css中的Background-position-x和background-position-y可以放大指定区域。

　　关于背景-位置：x，y，第一个值是水平位置，第二个值是垂直位置。

　　这是右边有放大效果的div:

　　div class= large :style= { background image:` URL($ { images[current]})，largeStyle }/div

　　这是css代码，可以参考一下：大的

　　位置：绝对；

　　top:0；

　　左：412px

　　宽度：400px

　　高度：400px

　　箱形阴影：0 0 10px rgba(0，0，0，0.1)；

　　背景-重复：不重复；

　　背景-尺寸：800px 800px

　　背景色：# f8f8f8

　　}

　　最后，当鼠标移出左边的方框区域时，蒙版被隐藏，右边放大的方框也被隐藏。

　　useinelement的isOutSide属性可以监控是否超出监控元素，v-show=！“在外面”就可以了。

　　关于Vue3.0手写放大镜效果的这篇文章就到这里了。更多关于Vue3.0手写放大镜的效果，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。