jquery.abPicZoom实现电商商品图片悬浮放大效果代码-html代码-BFW代码库

jquery.abPicZoom实现电商商品图片悬浮放大效果代码

代码语言：html

代码描述：jquery.abPicZoom实现电商商品图片悬浮放大效果代码

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

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.agilebins-v1.0.4.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.abPicZoom.min.js"></script>
    <style type="text/css">
        *{margin:0;padding:0}body{background:#0c91e8;font-size:12px;color:#183b52}ul,li{list-style:none}p{word-wrap:break-word}img{border:0;vertical-align:middle}a{color:#eef7fe;text-decoration:none}a:hover{color:#fff;text-decoration:none}.demo-intro2 .p1{font-size:14px;line-height:24px;padding:0 0 10px 0}.demo-intro2 .p2{font-size:18px;padding:20px 10px 0 0;font-style:italic;display:block;font-weight:bold;height:40px;line-height:24px}.demo-intro2 a{color:#183b52;text-decoration:none}.demo-intro2 a:hover{color:#fff;text-decoration:none}.codeHd{text-align:center;font-size:14px}.codeHd p{line-height:28px;color:#183b52;padding-bottom:30px}.codeHd p.p1{padding:0 200px 30px 200px}.codeHd p strong{text-align:center;font-weight:700}.codeHd p span{font-style:italic;font-size:12px}
    </style>
</head>

<body>
    <div style="text-align:center;padding:120px 0 180px 0;">
        <div class="logo z">
            <h2 style="color:#ebf7fe;font-size:38px;line-height:50px;font-weight:bold;font-style:italic;"><a href="" title="abPicZoom v1.02" target="_blank">abPicZoom</a></h2>
            <p style="font-size:13px;font-style:italic;color:#ddf0fb;">图片模拟放大镜插件 v1.0</p>
        </div>
    </div>
    <style type="text/css">
        .demo-body {
        width:760px;
        margin:0 auto
}
.abPicZoom-preview {
        width:342px
}
.abPicZoom-preview .bigImg {
        width:310px;
        height:380px;
        padding:5px;
        border:1px solid #E4E4E4;
        box-shadow:0 6px 20px #107cc3;
        border-radius:30px;
        background:#fff;
        overflow:hidden
}
.abPicZoom-preview .bigImg li {
        width:310px;
        height:380px;
        overflow:hidden
}
.abPicZoom-preview .preview,.abPicZoom-preview .bigImg li img {
        border-radius:30px
}
.abPicZoom-preview .selector {
        cursor:move;
        filter:alpha(opacity=20);
        -moz-opacity:.2;
        opacity:.2;
        background-color:#000;
        border:1px solid #eee;
        width:160px;
        height:160px;
        border-radius:30px
}
.abPicZoom-preview .smallImg {
        position:relative;
        width:322px;
        height:75px;
        overflow:hidden
}
.abPicZoom-preview .smallImg .smallList {
        width:248px;
        margin:0 auto;
        overflow:hidden
}
.abPicZoom-preview .smallImg li {
        float:left;
        width:52px;
        padding:15px 5px 10px 5px
}
.abPicZoom-preview .smallImg li img {
        border-radius:8px;
        width:50px;
        height:48px;
        cursor:pointer
}
.abPicZoom-preview .smallImg li a {
        background:#0c91e8;
        border:1px solid #0c91e8;
        border-radius:8px;
        width:50px;
        height:48px;
        box-shadow:0 2px 6px #107cc3;
        display:block
}
.abPicZoom-preview .smallImg li.on a {
        background:#4ad585;
        border:1px solid #4ad585;
        border-radius:8px;
        width:50px;
        height:48px;
        display:block
}
.abPicZoom-preview .smallImg li a:hover,.abPicZoom-preview .smallImg li.on a:hover {
        border:1px solid #3dc878
}
.abPicZoom-preview .s.........完整代码请登录后点击上方下载按钮下载查看