菜单图片切换js -

超级板凳

浏览: 93436 次
性别:
来自: 广州

最近访客更多访客>>

sky_kk

zackcheng

jiangweikakaxi

zhang0404

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

菜单图片切换js

XHTML HTML

前段时间同事和我讨论一个菜单图片切换的问题我看了下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" onmouseover="changeImg(this)" onmouseout="changeImg(this)" onclick="changeImg2(this)">个人风彩</li>
<li id="td2" onmouseover="changeImg(this)" onmouseout="changeImg(this)" onclick="changeImg2(this)">集体风彩</li>
<li id="td3" onmouseover="changeImg(this)" onmouseout="changeImg(this)" onclick="changeImg2(this)">世界风彩</li>
</ul>
</div>
</body>
</html>

如代码所示通过鼠标的移动触发切换图片在点击图标改变图片时先遍历是否已有被点击的按钮这个遍历我觉得不太妥当但也想不出好的办法

分享到：