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

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

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

<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>