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
});
属性名参数格式说明是否必须
zoomPupWnumber表示半透明滑块的宽度,默认80,单位pxfalse
zoomPupHnumber表示半透明滑块的高度,默认80,单位pxfalse
zoomWrapperWnumber放大镜显示的宽度,默认340,单位pxfalse
zoomWrapperHnumber放大镜显示的高度,默认340,单位pxfalse

demo预览

地址

插件下载地址

地址1

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

0
  • 本文分类:锋利的JQuery实例
  • 本文标签:jqzoom图片放大镜jQ插件
  • 流行热度:已超过 129 人围观了本文
  • 最后更新:2019年10月29日 - 23时46分08秒
  • 发布日期:2019年10月29日 - 23时46分08秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码