简介

jquery.jqzoom.js是一款JQuery放大镜插件，将鼠标放置在图片的某一点上时可以在右侧单独显示此点附近放大的图像，用于需要局部放大功能的场合。

使用

1  jquery.js 和 jqzoom.js 文件

2.  HTML

<a href="images/big.jpg" style="" title="kawasaki">
<img src="images/small.jpg"  title="kawasakigreen" style="border: 1px solid #666;">
</a>

[css]

.jqzoom{
border:1px solid black;
float:left;
position:relative;
padding:0px;
cursor:pointer;
}

.jqzoom img{
float:left;
}

div.zoomdiv {
z-index                 : 100;
position                : absolute;
top:0px;
left:0px;
width                   : 200px;
height                  : 200px;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center;
overflow: hidden;
}

div.jqZoomPup {
z-index                 : 10;
visibility              : hidden;
position                : absolute;
top:0px;
left:0px;
width                   : 50px;
height                  : 50px;
border: 1px solid #aaa;
background: #ffffff url(../images/zoom.gif) 50% top  no-repeat;;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(Opacity=50);
}

[/css]

3.  调用

<script>
$(function () {
$('.jqzoom').jqzoom();
});
</script>

相关链接

在线演示：https://www.jq22.com/yanshi648

GitHub 地址 ：https://github.com/mrenzidev/jqzoom