1顶

jquery鼠标感应中英文双语导航菜单

稿源：互联网 2022-04-02 21:40:44 点击： 4453 撤稿纠错

jquery仿flash效果鼠标感应翻动切换显示中英文双语导航，鼠标经过立即切换，可自定义。

以下讨论的是和jquery 鼠标感应双语导航菜单相关的jquery鼠标感应中英文双语导航菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" />
<title>网页特效  jquery鼠标感应翻动中英文双语导航菜单 站长特效网</title>
<style type="text/css">
body{width:100%;height:100%;margin:0;padding:0;background:url(/img/bg_20110112zzjs_net.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;}
.zzjs_net{width:930px;height:126px;position:relative;z-index:1;}
no-repeat 0 0;position:absolute;top:46px;left:41px;z-index:50;}
#nav_zzjs_net{margin:82px 0;float:left;display:inline;}
#nav_zzjs_net ul{float:left;height:34px;display:inline;margin:0 0 0 0px;list-style-type:none;}
#nav_zzjs_net 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_zzjs_net li div{height:34px;width:100px;overflow:hidden;position:relative;}
#nav_zzjs_net li div .n1,#nav_zzjs_net li div .n2{display:block;height:34px;width:100px;position:absolute;top:0px;left:0px;cursor:pointer;}
#nav_zzjs_net li div .n1{z-index:12;background:url(/img/nav_bg_20110112zzjs_net.gif) repeat-x top center;font-size:13px;}
#nav_zzjs_net li div .n2{z-index:11;background:url(/img/nav_bg_20110112zzjs_net.gif) repeat-x top center;}
#nav_zzjs_net li div a{color:#fff;}
#nav_zzjs_net li div a:hover{text-decoration:none;}
</style>
<script type="text/javascript" src="/img/jquery_zzjs.js"></script>
<script type="text/javascript">
    jQuery(function() {
        jQuery('#nav_zzjs_net li').hover(
  function() {
      jQuery(this).find('.n1').stop().animate({ opacity: '0', top: '43px' });
  },
  function() {
      jQuery(this).find('.n1').stop().animate({ opacity: '1', top: '0px' });
  }
 );//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
    });
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

<span style="color:#FF0000">需要加载js文件，请刷新页面后看效果！</span>
<div id="body">
 <div id="index_content">
  <div class="zzjs_net">
   <div id="nav_zzjs_net">
    <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>

关于jquery鼠标感应中英文双语导航菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011011366878.shtml方便下次再访问哦。

·上一篇： js模拟腾讯文本内容定时向上滚动特效
·下一篇： jquery设计简洁自动切换蓝色滑动门特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

jquery鼠标感应中英文双语导航菜单

文章分类LIST >>返回首页

最新游戏

最新新闻