大伙来看看这个是怎么个原理？

[WalkerJack]

http://news.163.com/special/ribendizhen_duibi/

没办法，只能贴外链。
大家看看那个对比图是怎么个原理。
做2个图层？蒙图？


我绝对不是来做网易的广告的，我不是丁三石的手下。

[showenxxx]

看代码阿
一个div两张图片，根据鼠标位置改变background

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(); });

});

});

});

[hongmei85]

		<script type="text/javascript" src="js/jq.js"></script>
		<script type="text/javascript">
		<!--
				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(); });
				
			});
			
		});
		
	});
		//-->
		</script>
<style type="text/css" media="screen"> 
	#beforeafter .section {
		margin-top: 2em;
		position: relative;
	}
	#beforeafter .section p.source {
		position: absolute;
		right: 0;
		top: 0;
		color: #999;
		font-size: 12px;
	}
	
	.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;
		}
	h2 {
		font-size:18px; font-weight:bold; text-align:left; line-height:31px;
	}
</style> 
</head>

	<body>
		<div id="beforeafter" style=""><div class="section">
	<h2>仙台机场 [鼠标移动图片上滑动观看]</h2>
	<p class="source">数据来源：澳大利亚广播公司</p>
	<div class="beforeafter"> 
		<img src="http://img1.cache.netease.com/cnews/zyguan/riben/1.jpg" rel="before" alt="Sendai Airport (before disaster)" width="940" height="529" /> 
		<img src="http://img1.cache.netease.com/cnews/zyguan/riben/2.jpg" rel="after" alt="Sendai Airport (after disaster)" width="940" height="529" /> 
	</div> 
</div>
					<div class="section">
	<h2>仙台市荒滨</h2>
	<p class="source">图片数据来源 ABC news</p>
	<div class="beforeafter"> 
		<img src="http://img1.cache.netease.com/cnews/zyguan/riben/3.jpg" rel="before" alt="Arahama in Sendai (before disaster)" width="940" height="529" /> 
		<img src="http://img1.cache.netease.com/cnews/zyguan/riben/4.jpg" rel="after" alt="Arahama in Sendai (after disaster)" width="940" height="529" /> 
	</div> 
</div></div>
	</body>