菜单图片切换js

57 阅读 0 评论 38 点赞

我是靠谱客的博主幽默书包，最近开发中收集的这篇文章主要介绍菜单图片切换js，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前段时间同事和我讨论一个菜单图片切换的问题我看了下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>

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