0%

jQ插件-jqzoom图片放大镜

发布于 / 分类: 锋利的JQuery,实例 / 暂无评论 / 阅读量 209

最后更新于 2019年10月29日

找了好几个放大镜插件发现全是老旧的,新版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里另存为吧!

jq-ui 滑动验证 jQ插件-thickImg大图查看器
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao