BeforeAfterSlider 一个轻量级实现图片Before/After效果的JS插件

前言

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

插件地址

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

效果预览

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

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

<!-- 定义一个容器 -->
<div id="mySlider"></div>

<!-- 引入插件 -->
<script src="https://unpkg.zhimg.com/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://unpkg.zhimg.com/before-after-slider@1.0.1/dist/slider.bundle.js"></script>

如果你使用原生 ES Modules：

1
2
3

<script type="module">
  import SliderBar from 'https://unpkg.zhimg.com/before-after-slider@1.0.1/dist/slider.bundle.js'
</script>

使用：

<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 中使用为例：

<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 编译打包了一下，主要就改了一点样式，增加了移动端触摸事件。