威言威语

今天在网易上看到一个关于日本地震的专题，里面的一个地震前后图片对于的效果看着感觉很不错，于是想整下来以备需要时候应用。看了下代码，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 class='after'></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 class='before'></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 class='help'>鼠标悬停图片上滑动观看</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
				var offset = jQuery(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;
		}