今天在网易上看到一个关于日本地震的专题，里面的一个地震前后图片对于的效果看着感觉很不错，于是想整下来以备需要时候应用。看了下代码，JQuery写的，代码没有压缩以及加密，这个整下来就方便了很多，主要是.after与.before的应用，大家也可以研究研究。

日本前几天发生强烈地震，本着人道主义精神，还是希望他们早日度过难关，重建家园。

今天在网易上看到一个关于日本地震的专题，里面的一个地震前后图片对于的效果看着感觉很不错，于是想整下来以备需要时候应用。看了下代码，JQuery写的，代码没有压缩以及加密，这个整下来就方便了很多，主要是.after与.before的应用，大家也可以研究研究。

VIEW DEMO

JQuery核心代码：

jQuery(function(){ // Loop through all the sets of before and after pics jQuery( .beforeafter ).each(function(){ // Set the container's size to the size of the image jQuery(this).width(jQuery(this).find( img[rel=before] ).attr( width )).height(jQuery(this).find( img[rel=before] ).attr( height )); // Convert the images into background images on layered divs jQuery(this).append( div /div ).find( .after ).css({ background : url( + jQuery(this).find( img[rel=after] ).attr( src ) + ) , width : jQuery(this).find( img[rel=after] ).attr( width ) + px , height : jQuery(this).find( img[rel=after] ).attr( height ) + px }); jQuery(this).append( div /div ).find( .before ).css({ background : url( + jQuery(this).find( img[rel=before] ).attr( src ) + ) , width : jQuery(this).find( img[rel=before] ).attr( width ) - 40 + px , height : jQuery(this).find( img[rel=before] ).attr( height ) + px }); // Add a helpful message jQuery(this).append( div 鼠标悬停图片上滑动观看 /div // Remove the original images jQuery(this).find( img ).remove(); // Event handler for the mouse moving over the image jQuery(this).mousemove(function(event){ // Need to know the X position of the parent as people may have their browsers set to any width varjQuery(this).offset().left; // Don't let the reveal go any further than 50 pixels less than the width of the image // or 50 pixels on the left hand side if ((event.clientX - offset) (jQuery(this).find( .after ).width() -50) (event.clientX - offset) 50) { // Adjust the width of the top image to match the cursor position jQuery(this).find( .before ).width(event.clientX - offset); // Fade out the help message after the first hover jQuery(this).hover(function(){ jQuery(this).find( .help ).animate({ opacity : 0}, 400, function(){ jQuery(this).find( .help ).remove(); });

CSS代码：

.section { margin-top: 50px; position: relative; .beforeafter { position: relative; overflow: hidden; } .before, .after { position: absolute; top: 0; left: 0; } .before { border-right: 5px solid #000; -moz-box-shadow: 1px 0 20px #222; -webkit-box-shadow: 1px 0 20px #222; box-shadow: 1px 0 20px #222; .help { position: absolute; bottom: 20px; right: 70px; font: bold 20px/1em Helvetica, Arial, sans-serif; color: #FFF; opacity: 0.7;