The image is shown above .. Download the image .. Good results .. JS directly connects to the remote connection.
Code reusability is poor .. I hope you can give me some advice.
Copy codeThe Code is as follows:
<! 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> test navigation </title>
<Script src = "http://img.jb51.net/jslib/jquery/jquery.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function ()
{
Var datacss = ["home", "game", "zine", "community", "calendar", "participant"];
For (var I = 0; I <datacss. length; I ++)
{
$ ("#" + Datacss [I]). append ("<div class = '" + datacss [I] + "'> </div> ");
$ ("." +Datacss[i00000000.css ('opacity ', 0 );
$ ("#" + Datacss [I]). hover (
Function ()
{
$ ("." + This. id). stop (). animate ({opacity: '1'}, 800 );
},
Function ()
{
$ ("." + This. id). stop (). animate ({opacity: '0'}, 800 );
});
}
});
</Script>
<Style type = "text/css">
Body {} ul li {list-style: none; float: left; margin: 0; padding: 0 ;}
# Home {background: url(navigation.jpg) top left no-repeat;
Width: 90px; height: 55px;
}
. Home {background: url(navigation.jpg) 0-55px no-repeat;
Width: 90px; height: 55px;
}
# Game {background: url(navigation.jpg)-90px 0px; no-repeat;
Width: 114px; height: 55px;
}
. Game {background: url(navigation.jpg)-90px-55px no-repeat;
Width: 114px; height: 55px;
}
# Zine {background: url(navigation.jpg)-204px 0px; no-repeat;
Width: 96px; height: 55px;
}
. Zine {background: url(navigation.jpg)-204px-55px no-repeat;
Width: 96px; height: 55px;
}
# Community {background: url(navigation.jpg)-300px 0px; no-repeat;
Width: 144px; height: 55px;
}
. Community {background: url(navigation.jpg)-300px-55px no-repeat;
Width: 144px; height: 55px;
}
# Calendar {background: url(navigation.jpg)-446px 0px; no-repeat;
Width: 137px; height: 55px;
}
. Calendar {background: url(navigation.jpg)-446px-55px no-repeat;
Width: 137px; height: 55px;
}
# Participant {background: url(navigation.jpg)-583px 0px; no-repeat;
Width: 135px; height: 55px;
}
. Participating {background: url(navigation.jpg)-583px-55px no-repeat;
Width: 135px; height: 55px;
}
</Style>
</Head>
<Body>
<Ul>
<Li> <a href = "#"> <div id = "home"> </div> </a> </li>
<Li> <a href = "#"> <div id = "game"> </div> </a> </li>
<Li> <a href = "#"> <div id = "zine"> </div> </a> </li>
<Li> <a href = "#"> <div id = "community"> </div> </a> </li>
<Li> <a href = "#"> <div id = "calendar"> </div> </a> </li>
<Li> <a href = "#"> <div id = "participant"> </div> </a> </li>
</Ul>
</Body>
</Html>