该功能为三部分
- 1.小图部分
小图宽高为400px - 2.放大镜
放大镜宽高为200px - 3.大图部分
大图宽高为800px
大图小图都是同一张图片,通过css来设置宽高,通过鼠标在小图中的位置来控制大图的横向和纵向滚动条的位置来实现该功能
效果图:
html代码
左边为小图部分,右边为大图部分
<div id="smallBox">
<img src="/img/1.png" alt="">
<div id="zoom"></div>
</div>
<div id="bigBox">
<img src="/img/1.png" alt="">
</div>
css代码:
#smallBox