js 图片放大镜功能

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

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

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

HTML:

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

js:

原文地址:https://www.cnblogs.com/jlliu/p/5319564.html