当前位置: 首页 > 工具软件 > Zooming > 使用案例 >

Zooming

满雨石
2023-12-01

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

 

演示地址:http://www.dowebok.com/demo/223/

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

转载于:https://www.cnblogs.com/empist/p/7941057.html

相关阅读

相关文章

相关问答