当前位置:主页 > JavsScript库 > 图库 / 图片 >

现代轻量级图像比较滑块 - image-compare-viewer
栏目分类:图库 / 图片   发布日期:2021-08-27   浏览次数:

一个现代的、轻量级的、移动兼容的图像比较滑块,用 vanilla JavaScript 编写。

用户可以通过单击/点击前后图像或拖动和滑动滑块来比较两个图像。

特征:

  • 响应式设计。

  • 触摸友好。

  • 流体模式创建一个全尺寸的图像比较查看器。

  • 支持水平和垂直方向。

  • 平滑滑动。

  • 允许您在 init 上指定起点。

使用:

1. 安装和下载库。

# NPM
$ npm install image-compare-viewer --save

2. 将之前/之后的图像包装到容器元素中。

<div id="example">
  <img src="before.jpg" alt="BEFORE" />
  <img src="after.jpg" alt="AFTER" />
</div>

3. 在 HTML 中加载图像比较查看器的文件。

<link href="dist/image-compare-viewer.min.css" rel="stylesheet" />
<script src="dist/image-compare-viewer.min.js"></script>

4. 初始化图像比较滑块。就是这样。

const element = document.getElementById("example");
const myViewer = new ImageCompare(element).mount();

5. 创建一个垂直图像比较滑块。

const myViewer = new ImageCompare(element,{
      verticalMode: false
})
.mount();

6. 启用流体模式以创建全尺寸图像比较滑块。

const myViewer = new ImageCompare(element,{
      fluidMode: true
})
.mount();

7. 确定起点。默认值:50 (50%)。

const myViewer = new ImageCompare(element,{
      startingPoint: 75
})
.mount();

8. 确定是否允许用户通过鼠标悬停比较前后图像。默认值:false。

const myViewer = new ImageCompare(element,{
      hoverStart: true
})
.mount();

9. 启用/禁用拖动滑块后的平滑滑动效果。默认值:true。

const myViewer = new ImageCompare(element,{
      smoothing: true,
      smoothingAmount: 100
})
.mount();

10.自定义滑块的外观。

const myViewer = new ImageCompare(element,{
      controlColor: "#FFFFFF",
      controlShadow: true,
      addCircle: false,
      addCircleBlur: true
})
.mount();

官方网站:https://github.com/kylewetton/image-compare-viewer

相关热词: 图像比较滑块

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