基于jQuery仿淘宝产品图片放大镜代码
今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码。这是一款基于jquery.imagezoom插件实现的jQuery放大镜。适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗,在线预览请点击。效果图如下:
实现的代码。
html代码:
<div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="美女" rel="images/01.jpg" class="jqzoom" /></a> </div> <ul class="tb-thumb" id="thumblist"> <li class="tb-selected"> <div class="tb-pic tb-s40"> <a href="#"> <img src="images/01_small.jpg" mid="images/01_mid.jpg" big="images/01.jpg"></a></div> </li> <li> <div class="tb-pic tb-s40"> <a href="#"> <img src="images/02_small.jpg" mid="images/02_mid.jpg" big="images/02.jpg"></a></div> </li> <li> <div class="tb-pic tb-s40"> <a href="#"> <img src="images/03_small.jpg" mid="images/03_mid.jpg" big="images/03.jpg"></a></div> </li> <li> <div class="tb-pic tb-s40"> <a href="#"> <img src="images/04_small.jpg" mid="images/04_mid.jpg" big="images/04.jpg"></a></div> </li> <li> <div class="tb-pic tb-s40"> <a href="#"> <img src="images/05_small.jpg" mid="images/05_mid.jpg" big="images/05.jpg"></a></div> </li> </ul> </div>