jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法。分享给大家供大家参考。具体如下：

左右拖拽切换对比图片效果，运行效果后，图片中间有个拖动条，拖动左右滑动，可看到图片不一样的效果，女模特的脸变嫩了，呵呵，其实是用了两张背景图片实现的，这就需要jquery.beforeafter.js插件了，拖动时候的小图标不见了，路径可以在jquery.beforeafter.js中设置，不多说了。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-beforeafter-js-style-codes/

具体代码如下：

  html{display : none ; } 
 

body {
  background: #ccc;
}
#content {
  margin:0 auto;
  width:755px;
}
#container + div.balinks {

}

希望本文所述对大家的jquery程序设计有所帮助。