• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

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插件
  • 流行热度:已超过 278 人围观了本文
  • 最后更新:2019年10月29日 - 23时46分08秒
  • 发布日期:2019年10月29日 - 23时46分08秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码