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();
     });
});
其它:

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