23
2019
04

Zooming 图片缩放插件

Zooming 是一款纯 javascript 图片缩放插件.

Zooming 是一款纯 javascript 图片缩放库,主要特点有:

  • 不依赖其他库,纯 JavaScript 实现,支持移动设备;

  • 流畅的动画;

  • 可缩放高清图像;

  • 易于集成和定制。

使用方法

1、引入文件

1
<script src="js/zooming.min.js"></script>

2、HTML

1
2
3
<a href="images/1.jpg">
    <img class="img-zoomable" src="images/1s.jpg" alt="">
</a>

或者使用 data 属性:

1
<img src="images/2s.jpg" data-action="zoom" data-original="images/2.jpg" alt="">

3、JavaScript

1
2
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松开前的回调函数

效果地址:http://small.sodc8.com/demo/sucai/25/index.html

GitHub:https://github.com/kingdido999/zooming

« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。