jQ插件-jqzoom图片放大镜

找了好几个放大镜插件发现全是老旧的，新版jq取消了很多东西，所以导致以前的都无法使用了，索性就自己写了一个新的放大镜插件。

预览图：

使用教程

html结构

<a href="images/01.jpg" class="jqzoom" title="">        
    <img src="images/small_01.jpg" title="迷你图片">        
</a>

通过给a元素一个class为jqzoom的钩子，然后添加一个href属性，指向一张没有压缩的图，也就是big_img。

a元素里面包着一个img元素，该元素显示一张小图。

注意：

如果你改动了小图的图片比例，大图也需要改动为相同比例，而且我并没有强制设置a元素的大小，所以a元素的大小实际上就是小图的大小。

css

.zoompad {
    position: relative;
    display: inline-block;
    border: 1px solid #999;
    background-color: #eee;
}

.zoompad>img {
    vertical-align: middle;
}

.zoomPup {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .3);
    cursor: move;
    display: none;
}

.zoomWindow {
    position: absolute;
    border: 1px solid #999;
    background-color: #eee;
    display: none;
}

.zoomWrapper {
    overflow: hidden;
    position: relative;
}

.zoomWrapper>img {
    position: absolute;
    top: 0;
    left: 0;
}

js插件

<script type="text/javascript" src="js/jquery.jqzoom.js"></script>

在引入jq文件后再引入该插件。

调用方式

$('a.jqzoom').jqzoom();

jqzoom()就是放大镜方法了，他目前支持四个属性

Api说明

jqzoom({
  zoomPupW : 80,
  zoomPupH : 80,
  zoomWrapperW : 340,
  zoomWrapperH : 340
})；

demo预览

地址

插件下载地址

地址1

或者直接去demo里另存为吧！