前言:
本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽。
本篇文章为您分析一下原生JS写淘宝放大镜效果
基本功能:
-
运用比例来控制移动放大镜从而选择需要放大的区域。
-
可以根据用户配置来调整放大镜尺寸。
需求分析
准备两张图片一张小图,一张大图(比例请参考京东或者淘宝页面上的放大镜)
一开始页面需要有三个div结构。
<div class="small"> <!--小图-->
<div class="move" style="height: 150px; width:150px"></div><!--可以移动的区域-->
</div>
<div class="big"></div><!--要显示的大图-->
<div class="move" style="height: 150px; width:150px"></div>
#### css样式 <div class="small">
<div class="move"></div>
</div>
<div class="big"></div>