基于jQuery仿淘宝产品图片放大镜代码

今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码。这是一款基于jquery.imagezoom插件实现的jQuery放大镜。适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗,在线预览请点击。效果图如下:

基于jQuery仿淘宝产品图片放大镜代码

实现的代码。

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> 

相关推荐