jquery.imagezoom实现商品多图放大镜效果代码-html代码-BFW代码库

jquery.imagezoom实现商品多图放大镜效果代码

代码语言：html

所属分类：电商

代码描述：jquery.imagezoom实现商品多图放大镜效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.imagezoom.min.js"></script>


    <style type="text/css">
        html{overflow-y:scroll;}
        body{margin:0; font:12px "\5B8B\4F53",san-serif;background:#ffffff;}
        div,ul,li{padding:0; margin:0;}
        li{list-style-type:none;}
        img{vertical-align:top;border:0;}
        
        /* box */
        .box{width:610px;margin:100px auto;}
        .tb-pic a{display:table-cell;text-align:center;vertical-align:middle;}
        .tb-pic a img{vertical-align:middle;}
        .tb-pic a{*display:block;*font-family:Arial;*line-height:1;}
        .tb-thumb{margin:10px 0 0;overflow:hidden;}
        .tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}
        .tb-s310, .tb-s310 a{height:310px;width:310px;}
        .tb-s310, .tb-s310 img{max-height:310px;max-width:310px;}
        .tb-s310 a{*font-size:271px;}
        .tb-s40 a{*font-size:35px;}
        .tb-s40, .tb-s40 a{height:40px;width:40px;}
        .tb-booth{border:1px solid #CDCDCD;position:relative;z-index:1;}
        .tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:40px;padding:2px;}
        .tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;}
        .tb-thumb li div{border:1px solid #CDCDCD;}
        div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
        div.zoomMask{position:absolute;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURf///////1V89WwAAAACdFJOU/8A5bcwSgAAABBJREFUeNpiYGBkYGQECDAAAA0ABMZIs2EAAAAASUVORK5CYII=") repeat scroll 0 0 transparent;cursor:move;z-index:1;}
    </style>


</head>

<body>

    <div class="box">

        <div class="tb-booth tb-pic tb-s310">
            <a href="images/01.jpg"><img src="//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png" alt="美女" rel="//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png" class="jqzoom" /></a>
        </div>

        <ul class="tb-thumb" id="thumblist">
            <li class="tb-selected">
                <div class="tb-pic tb-s40">
                    
                    <a href="#"><img src="/.........完整代码请登录后点击上方下载按钮下载查看