看到博友博客上的漂亮的banner，于是就索要的源码，效果灰常的漂亮，可以自己随意的定制，你可以实现诸如日本地震前后对比图像的效果，很不错，现在把实现的代码分享给大家。
首先是建立两张图片，并用id为beforeafter的DIV包裹。诸如以下形式，不过我是在DIV外面再包裹了一个DIV。
<code><div class="section">
<div class="beforeafter">
<img decoding="async" src="http://sharepic.googlecode.com/files/duibi1.jpg" rel="before" alt="Arahama in Sendai (before disaster)" width="940" height="529" />
<img decoding="async" loading="lazy" src="http://sharepic.googlecode.com/files/duibi2.jpg" rel="after" alt="Arahama in Sendai (after disaster)" width="940" height="529" />
</div>
</div></code>
<div class="beforeafter">
<img decoding="async" src="http://sharepic.googlecode.com/files/duibi1.jpg" rel="before" alt="Arahama in Sendai (before disaster)" width="940" height="529" />
<img decoding="async" loading="lazy" src="http://sharepic.googlecode.com/files/duibi2.jpg" rel="after" alt="Arahama in Sendai (after disaster)" width="940" height="529" />
</div>
</div></code>
其中两张图片的大小和像素得一致吧，原因不解释了。
实现对比的原理是修改图片CSS样式的:after、:before、和opacity属性来实现的。
下面是jQuery 的Code，首先必须载入jQuery库才能实现效果。
<code>
<script type="text/javascript" charset="utf-8">
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>
</code>
<script type="text/javascript" charset="utf-8">
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>
</code>
这里是CSS样式，你可以根据你的放置位置课适量修改CSS。
<code><style type="text/css" media="screen">
.section {
margin:50px 0 50px 5px;
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;
}
</style></code>
.section {
margin:50px 0 50px 5px;
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;
}
</style></code>
效果还行吧~~