一些电商网站中的商品放大镜效果制作

1. 如何让小正方形随着鼠标移动？

这种一般把 大正方形（黄色） 的宽高分别设置成 小正方形（黑色透明） 宽高的2倍。如下图：

以上大正方形宽高是400px，小正方形宽高是200px；

鼠标移动时，小正方形随着鼠标移动；

鼠标横向可以移动的距离记为elementX，100<elementX<300，此时小正方形距离大正方形的左边相对距离记为left，left=elementX-小正方形宽度的一半；

鼠标纵向可以移动的距离记为elementY，100<elementY<300，此时小正方形距离大正方形的顶部相对距离记为top，top=elementY-小正方形高度的一半；

无论横向移动还是纵向移动，当小正方形的边界超出大正方形的边界时，需要做限制。

我这里是vue3的代码，使用的是useVue插件的useMouseInElement()方法来获取鼠标距离大正方形的相对距离。

详细代码：