JS特效之 仿淘宝商城 图片集 鼠标滑过改变透明度 （内含Mootools和jQuery版）

效果：

演示网址：http://www.malltj.com/demo/demo1.html (MooTools版)

Mootools 版 ：

var index_fade = function() {
	var fastHoverFun;
	var hovetime=200;//无意识滑过时间
    $$('.fade img').addEvents({
		'mouseenter': function(){			
			var gallerys = $$(this).getParent().getParent().getParent().getElements('img');	//只获取同一区域内图片，而不是本页面所有图片
			var _self = this;
			fastHoverFun = setTimeout(function(){
				$$(gallerys).fade(0.7); //鼠标移入，除当前图片，其余全部变暗(透明度70%)
				_self.set("tween", {
					duration: 400,//淡出时间
					transition: Fx.Transitions.Sine.easeIn
				}).fade(1); //鼠标移入，当前图片高亮，其余全部变暗(透明度70%)
			},hovetime);
		}, 
		'mouseleave': function(){
			clearTimeout(fastHoverFun);
		}
	});
	$$('.fade').addEvent('mouseleave', function(){ 
		$$('.fade img').fade(1); //鼠标移出图片区域，恢复100%
		}
	);
};

window.addEvent('domready', function() {
    index_fade();
});

jQuery版：

$(window).load(function(){

	var delayfade,fastHoverFun;
	var hovetime=200; //无意识滑过时间
	$("div.fade").hover(function(){
		$(this).addClass("hover");
		clearTimeout(delayfade);
	},function(){

		var _self = this;
		$(this).removeClass("hover");
		delayfade = setTimeout(function(){
				$(_self).find("img").each(function(){$(this).fadeTo(400,1).removeClass("hover");}); //鼠标移出图片区域，透明度恢复100%
			},hovetime);
	});
	$("div.fade img").hover(function(){ 
		var _self=this;
		fastHoverFun = setTimeout(function(){
				$(_self).fadeTo(500,1).addClass("hover").parent().parent().parent().find("img").each(function(index){$(this).not(".hover").fadeTo(500,0.7);}) //鼠标移入，当前图片高亮，其余全部变暗(透明度70%)
			},hovetime);
	},function(){
		clearTimeout(fastHoverFun);
		$(this).fadeTo(300,0.7).removeClass("hover"); 
	});
});

HTML部分：

<div id="one" class="fade" style="width:795px;">
<div class="zuo" style="width:585px; float:left;"><a target="_blank"  href="http://www.malltj.com/gallery-14-grid.html"><img src="http://www.malltj.com/demo/d1/js_30.jpg" alt="精致内衣" width="190" height="208" border="0" /></a><a target="_blank"  href="http://www.malltj.com/gallery-9-grid.html"><img src="http://www.malltj.com/demo/d1/js_31.jpg" alt="2012新款女装" width="395" height="208" border="0" /></a><a target="_blank" href="http://www.malltj.com/gallery-43-grid.html"><img src="http://www.malltj.com/demo/d1/js_35.jpg" alt="大衣" width="190" height="206" border="0" /></a><a target="_blank"  href="http://www.malltj.com/gallery-11-grid.html"><img src="http://www.malltj.com/demo/d1/js_36.jpg" alt="女裤" width="199" height="206" border="0" /></a><a target="_blank"  href="http://www.malltj.com/gallery-9-grid.html"><img src="http://www.malltj.com/demo/d1/js_37.jpg" alt="女装外套" width="196" height="206" border="0" /></a></div>
<div class="you" style="float:right;"><a target="_blank"  href="http://www.malltj.com/gallery-129-grid.html"><img src="http://www.malltj.com/demo/d1/js_32.jpg" alt="新款女装" width="210" height="414" border="0" /></a></div>
</div>

<div style="clear:both; height:50px;">
<a href="http://www.malltj.com/demo/demo1_jq.html">jQuery版</a>
</div>

<div id="two" class="fade" style="width:795px;"><div>
<a target="_blank"  href="http://www.malltj.com/gallery-16-grid.html"><img src="http://www.malltj.com/demo/d1/03_46.jpg" alt="化妆品" width="199" height="206" border="0" /></a><a target="_blank"  href="http://www.malltj.com/gallery-110-grid.html"><img src="http://www.malltj.com/demo/d1/03_47.jpg" alt="服饰配饰" width="198" height="206" border="0" /></a><a target="_blank"  href="http://www.malltj.com/gallery-80-grid.html"><img src="http://www.malltj.com/demo/d1/03_48.jpg" alt="化妆品 套装" width="398" height="206" border="0" /></a><a target="_blank"  href="http://www.malltj.com/gallery-143-grid.html"><img src="http://www.malltj.com/demo/d1/03_49.jpg" alt="创意生活" width="397" height="208" border="0" /></a><a target="_blank"  href="http://www.malltj.com/gallery-124-grid.html"><img src="http://www.malltj.com/demo/d1/03_50.jpg" width="199" height="208" border="0" /></a><a target="_blank"  href="http://www.malltj.com/gallery-143-grid.html"><img src="http://www.malltj.com/demo/d1/03_51.jpg" width="199" height="208" border="0" /></a></div></div>