威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

JQuery鼠标滑动实现图片对比

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

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

今天在网易上看到一个关于日本地震的专题,里面的一个地震前后图片对于的效果看着感觉很不错,于是想整下来以备需要时候应用。看了下代码,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;
		}

您可能还会对这些文章感兴趣!

JQuery鼠标滑动实现图片对比:目前有 56 条评论

  1. 31楼
    jan:Google Chrome 23.0.1271.95 Windows 7

    哈哈,很不错!

    2013-01-25 02:04 回复
  2. 30楼
    李楷彰:Internet Explorer 8.0 (Compatibility Mode) Windows XP

    请问这个效果还能放到PPT里面?

    2011-04-14 14:26 回复
  3. 29楼
    混子傲游浏览器 2.0 Windows XP

    效果不错哦,哈哈!

    2011-04-10 14:12 回复
  4. 28楼
    yalonGoogle Chrome 10.0.648.204 Windows XP

    强悍的JQ

    2011-04-08 15:12 回复
  5. 27楼
    海天Google Chrome 10.0.648.204 Windows XP

    呵呵 这个蛮好玩的

    2011-04-08 10:18 回复
  6. 26楼
    surdaInternet Explorer 8.0 Windows 7

    就是打上一层蒙板。

    2011-03-30 23:49 回复
  7. 25楼

    这个真强大!

    2011-03-25 01:25 回复
  8. 24楼
    蛋糕Google Chrome 8.0.552.237 Windows XP

    学习!

    2011-03-21 00:35 回复
  9. 23楼

    这个效果很不错的

    2011-03-17 21:51 回复
  10. 22楼

    威哥出的都是精品啊,总要酝酿酝酿的嘛。

    2011-03-17 20:46 回复
    • WilliamInternet Explorer 9.0 Windows 7

      @世纪预言呵呵,好的效果么,当然要推荐推荐了啊

      2011-03-21 00:29 回复
  11. 21楼

    貌似很久没更新了哇!!!

    2011-03-17 19:13 回复
    • WilliamInternet Explorer 9.0 Windows 7

      @浩子文哪有啊,14号更新的,才3天

      2011-03-17 19:56 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

question razz sad smile redface biggrin shock confused cool lol mad rolleyes wink cry