html img图片等比例缩放_Zooming基于js的图像缩放库

Hi～新朋友，记得点蓝字关注我们哟

软件简介

Zooming 是一个进行图像缩放的 JavaScript 库。

特点

• 纯 JavaScript 开发，兼容移动设备

• 手势直观，动画平滑

• 可切换到更高分辨率的图像

• 易于集成，可定制

使用方法

1、引入文件

2、HTML

或者使用 data 属性：

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