/*放大镜*/
.ZoomMain {margin:100px;width:395px;height:460px;float:left;position:relative;}
.ZoomMain .zoom {height:393px;width:393px;position:relative;border: 1px solid #dcdddd;}
.ZoomMain .zoom .move{position:absolute;left:0; top:0;display:none;width:195px; height:195px;background:#000;opacity:0.2;filter:Alpha(Opacity=20);}
.ZoomMain .zoomDetail{display:none;border:1px solid #DCDDDD;width:393px; height:393px; position:absolute;right:-405px;top:0px; overflow:hidden;}
.littleImg {margin-top:10px;height:54px;overflow:hidden;position:relative;}
.littleImg span {position: absolute;display:block;width:10px;height:55px;background:#999;cursor:pointer;}
.littleImg span em {display: none;width:10px;height:55px;}
.littleImg span.btnL {left:0;background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left top;}
.littleImg span.btnL em {background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left -57px;}
.littleImg span.btnR em {background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat -10px -57px;}
.littleImg span.btnR {right:0;background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat -10px top;}
.littleImg span.hover em {display:block;}
.littleImg .slideMain {width:343px;height:55px;margin-left:26px;overflow:hidden;position:relative;}
.littleImg .slideMain ul {position:absolute;left:0;width:355px;padding-top:1px;}
.littleImg .slideMain ul li {float:left;margin-right:6px;cursor:pointer;width:50px;height:50px;border:1px solid #dbdbdb;}
.littleImg .slideMain ul li.selected {border-color:#999;}
.littleImg .slideMain ul li img {float:left;width:50px;height:50px;}
/*放大镜end*/
</style>
</head>
<body>
<!--放大镜-->
<div>
<div>
<span></span>
<img src="https://www.jb51.net/1347000569971.jpg" />
</div>
<div>
<span><em></em></span>
<span><em></em></span>
<div>
<ul>
<li><img src="https://www.jb51.net/1347000569971.jpg" medium-img="https://www.jb51.net/1347000569971.jpg" large-img="https://www.jb51.net/1347000569971.jpg" /></li>
<li><img src="https://www.jb51.net/1347000590691.jpg" medium-img="https://www.jb51.net/1347000590691.jpg" large-img="https://www.jb51.net/1347000590691.jpg" /></li>
<li><img src="https://www.jb51.net/1347000569971.jpg" medium-img="https://www.jb51.net/1347000569971.jpg" large-img="https://www.jb51.net/1347000569971.jpg" /></li>
<li><img src="https://www.jb51.net/1347000590691.jpg" medium-img="https://www.jb51.net/1347000590691.jpg" large-img="https://www.jb51.net/1347000590691.jpg" /></li>
<li><img src="https://www.jb51.net/1347000569971.jpg" medium-img="https://www.jb51.net/1347000569971.jpg" large-img="https://www.jb51.net/1347000569971.jpg" /></li>
<li><img src="https://www.jb51.net/1347000590691.jpg" medium-img="https://www.jb51.net/1347000590691.jpg" large-img="https://www.jb51.net/1347000590691.jpg" /></li>
<li><img src="https://www.jb51.net/1347000569971.jpg" medium-img="https://www.jb51.net/1347000569971.jpg" large-img="https://www.jb51.net/1347000569971.jpg" /></li>
<li><img src="https://www.jb51.net/1347000590691.jpg" medium-img="https://www.jb51.net/1347000590691.jpg" large-img="https://www.jb51.net/1347000590691.jpg" /></li>
<li><img src="https://www.jb51.net/1347000569971.jpg" medium-img="https://www.jb51.net/1347000569971.jpg" large-img="https://www.jb51.net/1347000569971.jpg" /></li>
<li><img src="https://www.jb51.net/1347000590691.jpg" medium-img="https://www.jb51.net/1347000590691.jpg" large-img="https://www.jb51.net/1347000590691.jpg" /></li>
<li><img src="https://www.jb51.net/1347000569971.jpg" medium-img="https://www.jb51.net/1347000569971.jpg" large-img="https://www.jb51.net/1347000569971.jpg" /></li>
<li><img src="https://www.jb51.net/1347000590691.jpg" medium-img="https://www.jb51.net/1347000590691.jpg" large-img="https://www.jb51.net/1347000590691.jpg" /></li>
<li><img src="https://www.jb51.net/1347000569971.jpg" medium-img="https://www.jb51.net/1347000569971.jpg" large-img="https://www.jb51.net/1347000569971.jpg" /></li>
<li><img src="https://www.jb51.net/1347000590691.jpg" medium-img="https://www.jb51.net/1347000590691.jpg" large-img="https://www.jb51.net/1347000590691.jpg" /></li>
</ul>
</div>
</div>
<div>
<img src="https://www.jb51.net/1347000569971.jpg" />
</div>
</div>
<!--放大镜end-->
jquery图片放大镜功能的实例代码
内容版权声明：除非注明，否则皆为本站原创文章。