本文详细解析了电商网站中商品放大镜和选项卡功能的实现，包括选择下标小图对应显示、鼠标移入显示放大镜、前进后退按钮切换图片等效果。采用面向对象的方法进行实现。
电商网站商品放大镜功能、选项卡功能案例详解
实现功能
1、选择下标小图，图片显示区出现对应的图片
2、鼠标移入图片显示区时出现放大镜，放大部分出现在右侧
3、点击前进后退的按钮，可将更多的图片显示出来
效果展示
方法一：面向对象实现
<body>
<div id="box" >
<!--正常显示图片区域-->
<div id="small">
<ol id="top">
<li style="display: block;" id="smallImg" class="a1"><img src="p01.jpg" /></li>
<li class="a2"><img src="p02.jpg" id="smallImg"/></li>
<li class="a3"><img src="p03.jpg" id="smallImg"/></li>
<li class="a4"><img src="p04.jpg" id="smallImg"/></li>
<li class="a2"><img src="p05.jpg" id="smallImg"/></li>
<li class="a3"><img src="p06.jpg" id="smallImg"/></li>
<li class="a4"><img src="p07.jpg" id="smallImg"/></li>
<li class="a4"><img src="p08.jpg" id="smallImg"/></li>
</ol>
<div id="mask"></div>
</div>
<!--放大后展示区域-->
<div
最低0.47元/天 解锁文章
876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
