根据鼠标放上切换内容制作的图片导航

我依然125 2010-11-11

展开全文

根据鼠标放上切换内容制作的图片导航，比较大气的感觉，在图标交替的同进加入了淡入淡出特效，整体效果和一个Flash导航没什么两样，为了加快演示速度，这里只放了两组图片导航，如果你需要很多，可以依次添加下去。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<title>鼠标放上切换内容</title>
<style>

</style>
<SCRIPT language=JavaScript>
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=0
}
</SCRIPT>
<SCRIPT language=javascript>
var min=0;
var max=100;
var number=5;
function OnMouseOver(obj){
if(obj.changing)
clearInterval(obj.changing);
obj.changing=setInterval("add("+obj.id+")",1);
}
function OnMouseOut(obj){
if(obj.changing)
clearInterval(obj.changing);
obj.changing=setInterval("sub("+obj.id+")",1);
}
function add(obj){
if(obj.filters.Alpha.Opacity > max){
clearInterval(obj.changing);
obj.changing=false;
obj.filters.Alpha.Opacity = max;
}
else
obj.filters.Alpha.Opacity += number;
}
function sub(obj){
if(obj.filters.Alpha.Opacity < min){
clearInterval(obj.changing);
obj.changing=false;
obj.filters.Alpha.Opacity = min;
}
else
obj.filters.Alpha.Opacity += -number;
}
</SCRIPT>
</head>
<body>
<div class="imdiv" style="background:url(http://www./jscss/demoimg/200910/a1.gif) no-repeat;">
<a href="#"><IMG id='img1' onmouseover='OnMouseOver(this)' style='FILTER: Alpha(Opacity=0)' onmouseout='OnMouseOut(this)' src='/jscss/demoimg/200910/a2.gif'></a>
</div>
<div class="imdiv" style="background:url(/jscss/demoimg/200910/b1.gif) no-repeat;">
<a href="#"><IMG id='img2' onmouseover='OnMouseOver(this)' style='FILTER: Alpha(Opacity=0)' onmouseout='OnMouseOut(this)' src='/jscss/demoimg/200910/b2.gif'></a>
</div>
</body>
</html>