ダイナミックナビゲーションメニューの効果
6735 ワード
<!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=utf-8" />
<meta name="google-site-verification" content="cJqlC7ylKtPbRAq_t8NnZ8PndMzDOmUUq_U1ogbTvjY" />
<meta name="alexaVerifyID" content="nN8RnLeKv14BP1T4Qthuc7rfQ4U" />
<link type="text/css" href="css/main.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<script type="text/javascript">
$(function(){
$('#index_nav li#fine a').css( {backgroundPosition: "-217px 0"} );
$('#index_nav li#fine a').mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0px 0px)"}, {duration:600,easing:'easeOutBounce'});
});
$('#index_nav li#fine a').mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-217px 0px)"}, {duration:600,easing:'easeOutBounce'});
});
$('#index_nav li#service a').css( {backgroundPosition: "-217px -46px"} );
$('#index_nav li#service a').mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0px -46px)"}, {duration:600,easing:'easeOutBounce'});
});
$('#index_nav li#service a').mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-217px -46px)"}, {duration:600,easing:'easeOutBounce'});
});
$('#index_nav li#phot a').css( {backgroundPosition: "-217px -94px"} );
$('#index_nav li#phot a').mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0px -94px)"}, {duration:600,easing:'easeOutBounce'});
});
$('#index_nav li#phot a').mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-217px -94px)"}, {duration:600,easing:'easeOutBounce'});
});
$('#index_nav li#rese a').css( {backgroundPosition: "-217px -141px"} );
$('#index_nav li#rese a').mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0px -141px)"}, {duration:600,easing:'easeOutBounce'});
});
$('#index_nav li#rese a').mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-217px -141px)"}, {duration:600,easing:'easeOutBounce'});
});
$('#index_nav li#news a').css( {backgroundPosition: "-217px -188px"} );
$('#index_nav li#news a').mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0px -188px)"}, {duration:600,easing:'easeOutBounce'});
});
$('#index_nav li#news a').mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-217px -188px)"}, {duration:600,easing:'easeOutBounce'});
});
$('#index_nav li#contact a').css( {backgroundPosition: "-217px -235px"} );
$('#index_nav li#contact a').mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0px -235px)"}, {duration:600,easing:'easeOutBounce'});
});
$('#index_nav li#contact a').mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-217px -235px)"}, {duration:600,easing:'easeOutBounce'});
});
});
</script>
<ul id="index_nav">
<li id="fine"><a href="fine.html" target="_blank"><span class="none"> </span></a></li>
<li id="service"><a href="service1.html" target="_blank"><span class="none"> </span></a></li>
<li id="phot"><a href="photo.html" target="_blank"><span class="none"> </span></a></li>
<li id="rese"><a href="reservation.html" target="_blank"><span class="none"> </span></a></li>
<li id="news"><a href="news.html" target="_blank"><span class="none"> </span></a></li>
<li id="contact"><a href="contact.html" target="_blank"><span class="none"> </span></a></li>
</ul>
</body>
</html>
CSS
body{ font-family:" "; font-size:12px; background:url(../images/bg.jpg) repeat-x top center; color:#aeaeae;}
a{ color:#aeaeae; text-decoration:none;}
a:hover{ text-decoration:underline;}
#index_nav{ float:left; display:inline; width:217px; height:270px; overflow:hidden; margin:23px 0 0 16px;}
#index_nav li{ float:left; display:inline; margin:7px 0 0 0; width:217px; height:37px;}
#index_nav li a{ display:block; width:217px; height:37px; background:url(../images/index_nav_list.jpg) no-repeat 0 0;}
#index_nav li#fine a{ background-position:-217px 0;}
#index_nav li#service a{ background-position:-217px -46px;}
#index_nav li#phot a{ background-position:-217px -94px;}
#index_nav li#rese a{ background-position:-217px -141px;}
#index_nav li#news a{ background-position:-217px -188px;}
#index_nav li#contact a{ background-position:-217px -235px;}
#body1 #index_nav li#fine a{ background-position:0 0;}
#body2 #index_nav li#service a{ background-position:0 -46px;}
#body3 #index_nav li#phot a{ background-position:0 -94px;}
#body4 #index_nav li#rese a{ background-position:0 -141px;}
#body5 #index_nav li#news a{ background-position:0 -188px;}
#body6 #index_nav li#contact a{ background-position:0 -235px;}
.none{ display:none}
/* CSS Document */
北京のウェブサイトの建设の仕事部屋-京东の相互接続、私达は取引先のために最も専门的なウェブサイトの建设、ウェブサイトの制作、ウェブサイトの设计、映画馆のウェブサイトの建设、映画馆のウェブサイトの制作、映画馆のウェブサイトの设计などのサービスを提供します.