jQuery圖像差異比較插件：jQuery.sequency

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="http://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.baiduhome.net/lib/view/home/1449581457816