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

代码语言：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 .sPrev,.abPicZoom-preview .sNext {
	border-radius:10px;
	box-shadow:0 2px 6px #107cc3;
	z-index:2;
	position:absolute;
	top:17px;
	width:18px;
	height:48px;
	background:#212121;
	font-size:18px;
	line-height:48px;
	color:#ccc;
	text-align:center;
	display:block
}
.abPicZoom-preview .sPrev {
	left:10px
}
.abPicZoom-preview .sNext {
	right:10px
}
.abPicZoom-preview .sPrev:hover,.abPicZoom-preview .sNext:hover {
	color:#fff;
	background:#000
}

    </style>
    <div class="demo-body">
        <div class="abPicZoom-preview" style="float:left; margin-right:30px;">
            <div class="bigImg">
                <ul>
                    <li><img src="//repo.bfw.wiki/bfwrepo/image/5e0e93f4b010e.png" preview="//repo.bfw.wiki/bfwrepo/image/5e0e93f4b010e.png" width="310" height="380" /></li>
                    <li><img src="//repo.bfw.wiki/bfwrepo/image/5e0e941197338.png" preview="//repo.bfw.wiki/bfwrepo/image/5e0e941197338.png" width="310" height="380" /></li>
               
                </ul>
            </div>
            <div style="clear:both"></div>
            <div class="smallImg">
                <div class="smallList">
                    <ul>
                        <li>
                            <a href="javascript:;"><img src="//repo.bfw.wiki/bfwrepo/image/5e0e93f4b010e.png" width="50" height="48" /></a>
                        </li>
                        <li>
                            <a href="javascript:;&quo.........完整代码请登录后点击上方下载按钮下载查看