放大镜效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换+放大镜效果</title>
<link rel="stylesheet" type="text/css" href="css/fangda.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
</head>
<body>
<div class="div1">
<div class="div2">
<div class="main w clearfix">
<div class="leftmain fl">
<!-- tab+放大镜 -->
<div class="zoom-warp">
<div class="smallPic" id="smallPic">
<img src="images/warc.jpg" id="leftimg">
<div class="zoom" id="zoom"></div>
</div>
<div class="bigPic" id="bigPic">
<img src="images/warc.jpg" id="rightimg">
</div>
<!-- 缩略图轮播 -->
<div class="clearfix slide">
<!-- 左箭头 -->
<div class="left-arrow"></div>
<!-- 缩略图列表 -->
<div class="imgList">
<ul id="tabqh"><!--
<li><img src="images/warc.jpg"></li>
<li><img src="images/raft.jpg"></li> -->
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bigPic" id="bigPic"></div>
</div>
</body>
</html>
<script src="css/11.js"></script>
结果如下：