插件描述：Zooming 是一款纯 javascript 图片缩放插件
Zooming 是一款纯 javascript 图片缩放库，主要特点有：
不依赖其他库，纯 JavaScript 实现，支持移动设备；
流畅的动画；
可缩放高清图像；
易于集成和定制。
使用方法
1、引入文件
<script src="js/zooming.min.js"></script>
2、HTML
<a href="images/1.jpg"> <img class="img-zoomable" src="images/1s.jpg" alt=""> </a>
或者使用 data 属性：
<img src="images/2s.jpg" data-action="zoom" data-original="images/2.jpg" alt="">
3、JavaScript
var zooming = new Zooming();
zooming.listen('.img-zoomable');配置
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| defaultZoomable | 字符串 | img[data-action=”zoom”] | 缩放元素，可以是 css 选择器 |
| enableGrab | 布尔值 | true | 是否能够抓取移动 |
| preloadImage | 布尔值 | true | 是否预加载图片 |
| transitionDuration | 整数/小数 | 0.4 | 动画持续时间 |
| transitionTimingFunction | 字符串 | cubic-bezier(0.4, 0, 0, 1) | 动画函数 |
| bgColor | 字符串 | rgb(255, 255, 255) | 遮罩背景颜色 |
| bgOpacity | 整数/小数 | 1 | 遮罩透明度 |
| scaleBase | 整数/小数 | 1 | 缩放比例，默认为适应窗口大小 |
| scaleExtra | 整数/小数 | 0.5 | 抓取图像时额外缩放比例 |
| scrollThreshold | 整数 | 40 | 关闭前需要多少滚动 |
| customSize | null | 缩放到指定的宽度和高度，如果设置该属性，将忽略 scaleBase 属性 | |
| onOpen | null | 放大后的回调函数 | |
| onClose | null | 关闭后的回调函数 | |
| onRelease | null | 松开后的回调函数 | |
| onBeforeOpen | null | 放大前的回调函数 | |
| onBeforeClose | null | 关闭前的回调函数 | |
| onBeforeGrab | null | 抓取前的回调函数 | |
| onBeforeMove | null | 移动前的回调函数 | |
| onBeforeRelease | null | 松开前的回调函数 |
PREVIOUS:
NEXT:
相关插件-图片展示
JQUERY全屏撕裂幻灯片-FULLSCREEN-SLIT-SLIDER
fullscreen-slit-slider由 jQuery 和 css3 打造而成。为我们提供了一个全屏的撕裂效果的幻灯片，接下来我就为大家讲解以下相关的用法。
图片展示
讨论这个项目（6）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
halo 0
2019/8/29 15:12:31
直接引入后即可，无需在初始化，初始化后报错。
<script>
$(document).ready(function() {
for (var i = 0; i <= $('.cont img').length - 1; i++) {
$('.cont img').eq(i).attr('data-action', "zoom")
$('.cont img').eq(i).attr('data-original', $('.cont img').eq(i).attr('src'))
}
console.log('img is add ok')
// var zooming = new Zooming();
// zooming.listen();
});
</script>
回复
四2带俩王 0
2017/11/16 10:05:20
当我想通过$().html('‘）；形式把‘
’<a href="images/1.jpg">
<img class="img-zoomable" src="images/1s.jpg" alt=""></a>‘’
插入div中会无效，有什么解决办法吗？
回复
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
