Demo地址：https://10.1pxeye.com/docs/before-after/
下载地址：https://10.1pxeye.com/docs/before-after.zip
 
手机查看效果可扫描二维码：

页面截图：

使用方法：

调用必要资源：

由于是jQuery插件，所以首先要确定已调用jQuery库。接下来：

<link rel="stylesheet" href="css/before-after.min.css">
<script src="js/before-after.min.js"></script>

容器结构：

<div class="ba-slider">
   <img src="img/after.jpg">
   <div class="resize">
        <img src="img/before.jpg">
   </div>
   <span class="handle"></span>
</div>

触发函数：

$(function() {
     $('.ba-slider').beforeAfter();
});

如果一个页面中有多个Before/After的容器，并要求单独受控制，可使用下方触发方式：

$(function() {
     $('.ba-slider').each(function(){
         $(this).beforeAfter();
     });
});

其它：

代码，结构简单，如果有特殊需求，可以自行修改源代码。