jQuery.sequency 插件可以通过向上或者向下滚动来比较一组图像的差异。

How to use it

1. Create a container for the before/after image comparison interface.

   <div id="sequency-container" >    </div>

2. Import jQuery library and the jQuery sequency.js into the webpage.<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.sequency.js"></script>
3. Add the images you want to compare into a JSON object.var $jsonSource = [ {caption:"Skeleton", img:"img/1.png"}, {caption:"Projection", img:"img/2.png"}, {caption:"Muscle groups", img:"img/3.png"}, {caption:"Muscles", img:"img/4.png"} ];
4. Initialize the plugin on the container you just created.var $jsonSource = [ {caption:"Skeleton", img:"img/1.png"}, {caption:"Projection", img:"img/2.png"}, {caption:"Muscle groups", img:"img/3.png"}, {caption:"Muscles", img:"img/4.png"} ];

5. The required CSS styles. Add the following CSS snippets into your CSS file.

   .seq-wrapper {        margin: 0 auto;        width: 980px;        padding: 40px 0 10px;        position: relative;      }        .seq-wrapper:after, .seq-wrapper:before {        display: table;        clear: both;        zoom: 1;        content: "";      }        .seq-section { background: #FFF; }        h1.section-title {        text-align: center;        font-size: 50px;        padding-bottom: 40px;        line-height: 40px;        font-family: 'Raleway', sans-serif;        font-weight: 400;        color: #000;        text-align: center;        text-transform: capitalize;      }        #sequency-flyer { position: absolute; }        #sequency-flyer.anch {        position: fixed;        top: 50%!important;        -webkit-transform: translateZ(0);      }        #sequency-flyer {        width: 980px;        height: 487px;        margin-top: -243px;        top: 350px;  }    #sequency {    height: 296px;    width: 465px;    margin: 0 auto;    margin-bottom: 95px;    overflow: hidden;    position: relative;  }    #sequency img {    position: relative;    height: auto;    display: inline-block;    margin: 0 auto;  }    #sequency .ja, #sequency .jb {    width: 465px;    overflow: hidden;    position: absolute;    left: 0px;    height: 100%;  }    #sequency .ja, #sequency .jb {    -webkit-transition: height .1s ease-out;    -moz-transition: height .1s ease-out;    -ms-transition: height .1s ease-out;    -o-transition: height .1s ease-out;    transition: height .1s ease-out;    text-align: center;  }    #sequency .ja.no-trans, #sequency .jb.no-trans {    -webkit-transition: none;    -moz-transition: none;    -ms-transition: none;    -o-transition: none;    transition: none;  }    #sequency_bar {    -webkit-transition: top .1s ease-out;    -moz-transition: top .1s ease-out;    -ms-transition: top .1s ease-out;    -o-transition: top .1s ease-out;    transition: top .1s ease-out;  }    #sequency_bar {    width: 100%;    margin-left: 0;  }    #sequency_bar.down {    box-shadow: 0 5px 5px 5px rgba(33,33,33,.05);    -moz-box-shadow: 0 5px 5px 5px rgba(33,33,33,.05);    -webkit-box-shadow: 0 5px 5px 5px rgba(33,33,33,.05);  }    #sequency_bar.up {    box-shadow: 0 -5px 5px 5px rgba(33,33,33,.05);    -moz-box-shadow: 0 -5px 5px 5px rgba(33,33,33,.05);    -webkit-box-shadow: 0 -5px 5px 5px rgba(33,33,33,.05);  }    #sequency .ja {    bottom: 0;    z-index: 15;  }    #sequency .jb {    top: 0px;    z-index: 20;    background: #FFF;  }    #sequency .jb img { visibility: hidden; }    #sequency .jb.active img { visibility: visible; }    #sequency_bar {    height: 1px;    background: #c5c5c5;    position: absolute;    top: 295px;    z-index: 1000;  }    #sequency_bar.full {    width: 2400px;    margin-left: -900px;  }    #sequency_text {    width: 510px;    margin: 0 auto;    margin-bottom: 180px;  }    #sequency_text ul {    text-align: center;    display: block;    margin: 0 auto;    padding: 0;  }    #sequency_text ul li {    float: none;    display: inline-block;    margin-left: 10px;    margin-right: 10px;  }    #sequency_text ul li span {    -webkit-transition: opacity .5s ease-in-out;    -moz-transition: opacity .5s ease-in-out;    -ms-transition: opacity .5s ease-in-out;    -o-transition: opacity .5s ease-in-out;    transition: opacity .5s ease-in-out;  }    #sequency_text ul li span, #sequency_text ul li a {    float: none;    font-family: "Raleway";    font-size: 16px;    color: #636363;    opacity: 0;  }    #sequency_text ul li.active span, #sequency_text ul li.active a { opacity: 1; }    #sequency_nav { position: absolute; }    #sequency_nav ul { }    #sequency_nav ul li {    display: block;    margin-bottom: 10px;  }    #sequency_nav ul li a {    background: #e3e3e3;    cursor: pointer;    text-indent: -9999px;    width: 10px;    height: 10px;    display: block;    cursor: pointer;    text-indent: 9999px;    overflow: hidden;    border-radius: 5px;    box-sizing: content-box;    text-align: right;  }    #sequency_nav ul li.active a { background: #b0b0b0; }

6. Customization options with default values.

   // data source  jsonSource:    [],    // plugin title  title      :  "jQuery.sequency.js",     // step speed in ms  stepSpeed    :  1500,    // viewport height  viewportHeight   :  264,    // viewort padding  viewportPaddingY :  50,    // fullscreen mode  barFullscreen  :  false,    // parent container  container    : window,    // callback  initiate:    function(){},

项目主页：http://www.open-open.com/lib/view/home/1449581457816