目录
  1. 1. 前言
  2. 2. 插件地址
  3. 3. 效果预览
  4. 4. 介绍
  5. 5. 安装
    1. 5.1. 直接引入
    2. 5.2. 模块化安装使用
  6. 6. 参数
  7. 7. How to Contribute
  8. 8. License
  9. 9. By the way
BeforeAfterSlider 一个轻量级实现图片Before/After效果的JS插件

前言

Before/After 这个效果也算常见,之前录制B站视频的时候自己动手写了一下,但也只是实现了功能,并不完善。最近又刚好研究了一下NPM怎么发布自己的包,索性就直接把这个功能完善一下,添加了移动端触摸事件,打包上传了NPM。


插件地址

NPM package 地址:戳这里
GitHub 地址:戳这里


效果预览

俺不是图片喔!!滑动试试

而以上的效果,我只是在页面插入了以下代码,简单方便,还不用操作样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 定义一个容器 -->
<div id="mySlider"></div>

<!-- 引入插件 -->
<script src="https://cdn.jsdelivr.net/npm/before-after-slider@1.0.1/dist/slider.bundle.js"></script>

<!-- 创建对象 New SliderBar({options}) -->
<script>
window.onload = function() {
new SliderBar({
el: "#slider1",
beforeImg: './before.jpg',
afterImg: './after.jpg'
});
}
</script>

介绍

轻量级JS库,支持PC鼠标及移动端触摸滑动,轻松简单实现图片Before/After效果。

  • 原生ES6开发、不依赖任何框架和库的轻量级图片Before/After效果,类库大小仅 9KB。
  • 支持鼠标 mousemove 和 屏幕 touchmove。
  • 不需要设置样式,自适应宽度。
  • 可自定义图片、区域大小、滑动条及颜色等。
  • 滑动区域自适应居中,图片以高度自适应居中,不必额外样式处理,方便布局。
  • API简洁,易上手。支持 PC 及移动端。

安装

模块支持:

  • 在浏览器环境下使用,通过<script>标签来引入这个类库
  • 通过NPM安装使用
  • 兼容 ES6(ES2015) 的模块系统、CommonJS 和 AMD 模块规范


直接引入

CDN 引入:

1
<script src="https://cdn.jsdelivr.net/npm/before-after-slider@1.0.1/dist/slider.bundle.js"></script>

如果你使用原生 ES Modules:

1
2
3
<script type="module">
import SliderBar from "https://cdn.jsdelivr.net/npm/before-after-slider@1.0.1/dist/slider.bundle.js";
</script>

使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="mySlider"></div>

<script>
new SliderBar({
el: '#mySlider', // 容器,必选
beforeImg: './before.jpg', // 图片1,必选
afterImg: './after.jpg', // 图片2,必选
width: "90%", // 滑动区域宽度,默认外边框100%
height: "400px", // 高度,默认 图片高度
line: false, // 是否要分割线,默认 true
lineColor: "rgba(0,0,0,0.5)" // 分割线颜色,默认 rgba(0,0,0,0.5)
});
</script>

模块化安装使用

兼容 ES6(ES2015) 的模块系统、CommonJS 和 AMD 模块规范。
注意加 --save 喔,生产依赖。

Npm install:

1
npm install before-after-slider --save

这里以 Vue 中使用为例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
<div id="app">
<!-- 容器 -->
<div id="mySlider"></div>
</div>
</template>

<script>
import SliderBar from 'before-after-slider'; // 引入包
export default {
name: 'app',
mounted() {

// 浏览器渲染完成后设置参数。new SliderBar({options});
new SliderBar({
el: '#mySlider',
beforeImg: './before.jpg',
afterImg: './after.jpg'
});

}
}
</script>

参数

参数 类型 默认值 描述
el String (必选参数) 容器,”#sliderId”
beforeImg String (必选参数) 图片1的 URL
afterImg String (必选参数) 图片2的 URL
width String ‘100%’ 滑动区宽度,支持各种值(%,px,em,rem)
height String none 滑动区高度
line Boolean true 是否需要添加分割线
lineColor String ‘rgba(0, 0, 0, .5)’ 分割线颜色,支持透明色

备注:请确保两张图片一样宽高。


How to Contribute

发现问题或建议,欢迎大家提交issues

提交BUG传送门:submit a new issues

提交问题传送门:feature request

License

The MIT License.


By the way

😂 之前写这功能时候录的视频,有兴趣就瞅瞅吧。思路就这思路,插件只是用ES6写的,Babel编译打包了一下,主要就改了一点样式,增加了移动端触摸事件。


文章作者: Vincent F0ng
文章链接: https://vincef0ng.cn/post/before-after-slider/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Vincent F0ng

评论(支持Markdown)