原理:放置两张相同的图片,一张作为主图片(图片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: