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

基本原理

  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

点我访问效果

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2020/10/20/w-e-b-xue-xi---shi-xian-tu-pian-fang-da-jing-de-xiao-guo
最后更新于:  246  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟