日本前几天发生强烈地震,本着人道主义精神,还是希望他们早日度过难关,重建家园。
今天在网易上看到一个关于日本地震的专题,里面的一个地震前后图片对于的效果看着感觉很不错,于是想整下来以备需要时候应用。看了下代码,JQuery写的,代码没有压缩以及加密,这个整下来就方便了很多,主要是.after与.before的应用,大家也可以研究研究。
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; }本文固定链接: https://www.weisay.com/blog/jquery-mouse-over-achieve-image-contrast.html | 威言威语
哈哈,很不错!