原理:使用两张背景略为不同的图片,第一张采用绝对布局,为hover-out时的状态;第二张采用默认布局,为hover-on状态,当鼠标滑过时,将第一张图片的透明度慢慢减为0,鼠标移出时将透明度慢慢加为1
<a id="defaultTheme" class="rolloverlink" value="default"> <img class="baseImage" src="skins/common/images/index/featured-1.jpg" ></img><img class="overImage" src="skins/common/images/index/featured-1-on.jpg"></img> </a> <a id="skyblueTheme" class="rolloverlink" value="skyblue"> <img class="baseImage" src="skins/common/images/index/featured-2.jpg" ></img><img class="overImage" src="skins/common/images/index/featured-2-on.jpg"></img> </a>
控制代码:
$(".rolloverlink").hover(function(){ $(this).find(".baseImage").stop().animate( { opacity: '0' } , 1000 ); },function(){ $(this).find(".baseImage").stop().animate( { opacity: '1' } , 1000 ); });
IE6、7上需要注意:</img>和下一个<img>之间不能有空格