当前位置:主页 > JavsScript库 > 其它 >

JavaScript触控友好的图像缩放库 - Ironex Zoom
栏目分类:其它   发布日期:2021-09-02   浏览次数:

一个简单、小巧、移动兼容的图像缩放库,支持双击、鼠标移动、鼠标滚轮、双击、触摸移动和捏合事件。

使用:

1. 使用 NPM 安装并导入 Ironex Zoom。

# NPM
$ npm i zoom-by-ironex --save
 
import { zoom } from "zoom-by-ironex";

2. 或者在文档中加载zoom-by-ironex.min.js库。

<script src="js/zoom-by-ironex.min.js"></script>

3. 将图像添加到缩放区域。

<div class="zoom">
  <img src="zoom.jpg" alt="Image Alt" />
</div>

4. 对图像应用平滑过渡效果。可选的。

.zoom img{ 
  bottom: 0; 
  display: block; 
  left: 0; 
  margin: auto; 
  max-height: 100%; 
  max-width: 100%; 
  position: absolute; 
  right: 0; 
  top: 0;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
 
.zoom-transition{
  transition: -moz-transform ease 200ms;
  transition: -ms-transform ease 200ms;
  transition: -o-transform ease 200ms;
  transition: -webkit-transform ease 200ms;
  transition: transform ease 200ms;
}

5. 初始化库并完成。

zoom();

6. 覆盖默认的 CSS 类。

zoom({
 
  // 缩放时添加到容器的 CSS 类
  active: "zoom-active",
 
  // 动画过渡时添加到图像的 CSS 类
  transition: "zoom-transition",
 
  // 加载后添加到图像的类
  visible: "visible",
 
  // 图像容器类
  zoom: "zoom"
 
})


7. 自定义图像缩放库的可能选项。

zoom({
  // 这里的 CSS 类
}, {
 
  // 用于双击、双击和调整大小
  scaleDefault: 2, 
 
  // 用于滚轮缩放
  scaleDifference: 0.5, 
 
  // 最大缩放
  scaleMax: 10, 
 
  // 最小缩放
  scaleMin: 1, 
 
  // 缩放时禁用页面滚动
  scrollDisable: true,
 
  // 这应该对应于缩放过渡过渡持续时间
  transitionDuration: 200, 
 
  // 点击之间的延迟 - 当脚本决定用户是否执行双击时使用
  doubleclickDelay: 300
 
})


8. 图像放大后执行回调函数。

zoom({
  // 这里的 CSS 类
}, {
  // 这里的选项
}, (function ($container, zoomed) {
  console.log(zoomed);
}))


官方网站:https://github.com/ironexdev/zoom

相关热词: Ironex Zoom图像缩放

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库