js 图片放大镜功能

2022-11-20,,,

原理:放置两张相同的图片,一张作为主图片(图片1),另一张作为用来裁剪并放大的图片(图片2)

         鼠标移动时,计算鼠标在图片1的位置(距离图片1左上角的x,y距离),以此决定在图片2开始裁剪的位置,放大用zoom:放大倍数

类似于京东淘宝查看图片的功能

HTML:

<img id="img1" src="data:images/1.jpg" style="position: absolute; width:600px; height:600px;"/>
<img id="img2" src="data:images/1.jpg" style="position: absolute; width:600px; height:600px;left:650px;" />
<div id="clipbox" style="position: absolute; width:100px; height:60px; border:1px solid blue; display:none"></div>

js:

js 图片放大镜功能的相关教程结束。

《js 图片放大镜功能.doc》

下载本文的Word格式文档,以方便收藏与打印。