前端学习日记---图片随鼠标移动放大效果

效果如图：

使用插件VueUse中的useMouseInElement（）方法来监听鼠标移动 ，括号里面为响应式对象，代码如下：

const target = ref(null) //用来绑定对应组件而定义的响应式对象

//获取对应鼠标在元素内的位置，以及鼠标是否在元素外

const { elementX, elementY, isOutside } = useMouseInElement(target)

注意：elementX, elementY, isOutside这三个属性皆为响应式属性对象，下方watch进行监听，直接写属性名就行。

为（鼠标在元素中的x，y坐标，鼠标是否在元素内部）

后续对其进行监听操作

//蒙版虚影小正方形在元素里的位置

const left = ref(0)

const top = ref(0)

/大正方形中的背景图移动的x，y位置

const positionX = ref(0)

const positionY = ref(0)

//监听鼠标移动位置

watch([elementX, elementY, isOutside], () => {

if(!isOutside.value){

    return

  }//此处需对鼠标是否在元素内进行判断，进而达到优化界面的效果，防止持续监听

此处需要个人对图片移动进行计算，来控制蒙蔽虚影小正方形在图片中的移动规则

*************

*****************

上方写蒙版小正方形在图片中的移动规则

positionX.value=-left.value*2//注意大正方形的图片移动方向是与鼠标在中正方形中移动方向相反所以取负，且放大倍数是2倍，所以要*2

  positionY.value=-top.value*2

}）

记得最后需要在<template>中对蒙版小正方形和放大效果的大正方形用v-show：“！isOutside”来控制显示