一、需求分析
为实现以上效果,可知需求大体如下
- 鼠标移入遮罩层放大图需要显示,鼠标移出的时候遮罩层和放大图隐藏
- 鼠标在移动的时候遮罩层要跟着鼠标动 (鼠标的中间动)(边界问题)
- 放大图也要按照左边(遮罩层)移动比例来移动
- 鼠标移到小图上可以切换图片
二、总体思路设计
左侧使用块级元素
嵌套,右侧使用一张背景图和
(enlarge作为可视区域).
由于需要鼠标进行操作后才会可视,故此将mask(遮罩层)和enlarge(放大图的可视区),的display属性初始值设置为none;
由于需要鼠标进行操作后才会可视,故此将mask(遮罩层)和enlarge(放大图的可视区),的display属性初始值设置为none;
元素排列
<div class="box">
<div class="show">
<img src="./imgs/1.jpg" alt="">
<div class="mask"></div>
</div>
<div class="list">
<p class="active">
<img src="./imgs/1.small.jpg" showImg="./imgs/1.jpg" enlargeImg="./imgs/1.big.jpg" alt="">
</p>
<p>
<img src="./imgs/2.small.jpg" showImg="./imgs/2.jpg" enlargeImg=&