jquery鼠标感应中英文双语导航菜单切换显示

4周前 (04-20 11:28)阅读28回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4494
  • 级别管理员
  • 主题898
  • 回复2
楼主

jquery仿flash效果中英文双语导航菜单鼠标感应翻动切换显示特效,当用户的鼠标经过时立即切换显示,可自定义。

<!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" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>jquery鼠标感应中英文双语导航菜单切换显示_武鸣人</title>
<style type="text/css">
body{width:100%;height:100%;margin:0;padding:0;background:url(/img/20240420_www_wuming_ren_1.gif) repeat-x top center;font-size:12px;color:#616161;}
a,a:link,a:visited,a:active{color:#616161;text-decoration:none;}
a:hover{text-decoration:underline;color:#710075;}
#body{ width:100%;float:left;}
.wuming_ren{width:930px;height:126px;position:relative;z-index:1;}
no-repeat 0 0;position:absolute;top:46px;left:41px;z-index:50;}
#nav_wuming_ren{margin:82px 0;float:left;display:inline;}
#nav_wuming_ren ul{float:left;height:34px;display:inline;margin:0 0 0 0px;list-style-type:none;}
#nav_wuming_ren li{float:left;height:34px;width:100px;font-size:13px;font-family:Verdana;line-height:34px;text-align:center;cursor:pointer;color:#fff;}
#index_nav_cases a,#index_nav_cases a:link,#index_nav_cases a:visited,#index_nav_cases a:active{color:#fff;}
#index_nav_cases a:hover{text-decoration:none;}
#nav_wuming_ren li div{height:34px;width:100px;overflow:hidden;position:relative;}
#nav_wuming_ren li div .n1,#nav_wuming_ren li div .n2{display:block;height:34px;width:100px;position:absolute;top:0px;left:0px;cursor:pointer;}
#nav_wuming_ren li div .n1{z-index:12;background:url(/img/20240420_www_wuming_ren_2.gif) repeat-x top center;font-size:13px;}
#nav_wuming_ren li div .n2{z-index:11;background:url(/img/20240420_www_wuming_ren_2.gif) repeat-x top center;}
#nav_wuming_ren li div a{color:#fff;}
#nav_wuming_ren li div a:hover{text-decoration:none;}
</style>
<script type="text/javascript" src="/img/jquery_wuming_ren.js"></script>
<script type="text/javascript">
    jQuery(function() {
        jQuery('#nav_wuming_ren li').hover(
function() {
    jQuery(this).find('.n1').stop().animate({ opacity: '0', top: '43px' });
},
function() {
    jQuery(this).find('.n1').stop().animate({ opacity: '1', top: '0px' });
}
);//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
    });
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<span style="color:#FF0000">需要加载js文件,请刷新页面后看效果!</span>
<div id="body">
<div id="index_content">
<div class="wuming_ren">
<div id="nav_wuming_ren">
<ul>
<li id="index_nav_about"><div><span class="n1">武鸣人一号</span><span class="n2">the first</span></div></li>
<li id="index_nav_service"><div><span class="n1">武鸣人二号</span><span class="n2">the second</span></div></li>
<li id="index_nav_cases"><div><a href="#"><span class="n1">武鸣人三号</span><span class="n2">the third</span></a></div></li>
<li id="index_nav_adva"><div><span class="n1">武鸣人四号</span><span class="n2">the fourth</span></div></li>
<li id="index_nav_contact"><div><span class="n1">武鸣人五号</span><span class="n2">the fifth</span></div></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>


0
0
收藏0
回帖

jquery鼠标感应中英文双语导航菜单切换显示 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息