前段时间同事和我讨论一个菜单图片切换的问题 我看了下js控制图片的切换 在这里贴出来总结一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>aa</title>
<script language="javascript" type="text/javascript">
var img1="url(images/menu_bg1.gif)";
var img2="url(images/menu_bg2.gif)";
var img3="url(images/img_mainmenu_bk_yellow.gif)";
function changeImg(obj){
if(checkColr(obj)){
if(obj.style.backgroundImage==img2){
obj.style.backgroundImage=img1;
}else{
obj.style.backgroundImage=img2;
}
}
}
function changeImg2(obj){
check(obj);
obj.style.backgroundImage=img3;
}
function checkColr(obj){
if(obj.style.backgroundImage!=img3){
return true;
}else{
return false;
}
}
function check(obj){
var len=document.getElementById("tr").getElementsByTagName('li').length;
for(i=1;i<=len;i++){
var tdi="td"+i;
var objold=document.getElementById(tdi);
if(objold.style.backgroundImage==img3&&objold!=obj){
objold.style.backgroundImage=img1;
}
}
}
</script>
<style>
.mm{
width:249px;
height:30px;
float:left;
}
.mm ul{
width:249px;
height:30px;
margin:0;
padding:0;
}
.mm ul li{
list-style:none;
width:83px;
height:30px;
float:left;
text-align:center;
line-height:30px;
cursor:pointer;
background:url(images/menu_bg1.gif);
}
</style>
</head>
<body>
<div class="mm">
<ul id="tr">
<li id="td1" οnmοuseοver="changeImg(this)" οnmοuseοut="changeImg(this)" οnclick="changeImg2(this)">个人风彩</li>
<li id="td2" οnmοuseοver="changeImg(this)" οnmοuseοut="changeImg(this)" οnclick="changeImg2(this)">集体风彩</li>
<li id="td3" οnmοuseοver="changeImg(this)" οnmοuseοut="changeImg(this)" οnclick="changeImg2(this)">世界风彩</li>
</ul>
</div>
</body>
</html>
如代码所示 通过鼠标的移动触发切换图片 在点击图标改变图片时先遍历是否已有被点击的按钮 这个遍历我觉得不太妥当 但也想不出好的办法
相关资源：菜单形式图片切换特效
