自己的突发奇想,想实现一个这个效果,看似简单但是不简单哇,哭了

基本原理

  1. 用一个div充当容器把缩小的图片装起来
  2. 用另一个圆角50%div把放大版的装起来,再放入上面的div中,再使他们的右上角重合了,接下来我们只需要用JavaScript进行坐标转换就好啦
  3. 坐标转换是这个的核心,我们现在只看x方向,其实也就是个数学公式:
    d <放大镜中心距左侧的距离>
    w <缩小版图片的长度>
    D 放大后对应的位置距左侧的距离
    W 大图的长度
    即 d/w=D/W,看起来很简单哇,但是我也改了好久,哭了
    对于y方向同理就好了!

核心代码:

let mImgLeft=(moveLeft+move.offsetWidth/2)/container.offsetWidth*mImg.offsetWidth-move.offsetWidth/2;
mImg.style.left=-mImgLeft+'px';

image.png

点我访问效果

Q.E.D.


努力学习的小菜鸟