jQuery仿Flash上下翻动的中英文导航菜单实例

当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目

来源：阅读：757 次日期：2015-03-12 14:23:26

温馨提示：小编为您整理了“jQuery仿Flash上下翻动的中英文导航菜单实例”,方便广大网友查阅！

这篇文章主要介绍了jQuery仿Flash上下翻动的中英文导航菜单,实例分析了jQuery实现Flash反动特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery仿Flash上下翻动的中英文导航菜单的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ">

<head>

<title>jQuery仿Flash鼠标感应式翻动的导航菜单</title>

body{width:100%;height:100%;margin:0;padding:0;background:url(/jscss/demoimg/201007/bg.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;}

.index_top{width:930px;height:126px;position:relative;z-index:1;}

no-repeat 0 0;position:absolute;top:46px;left:41px;z-index:50;}

#index_nav{margin:82px 0;float:left;display:inline;}

#index_nav ul{float:left;height:34px;display:inline;margin:0 0 0 0px;list-style-type:none;}

#index_nav 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;}

#index_nav li div{height:34px;width:100px;overflow:hidden;position:relative;}

#index_nav li div .n1,#index_nav li div .n2{display:block;height:34px;width:100px;position:absolute;top:0px;left:0px;cursor:pointer;}

#index_nav li div .n1{z-index:12;background:url(/jscss/demoimg/201007/nav_bg.gif) repeat-x top center;font-size:13px;}

#index_nav li div .n2{z-index:11;background:url(/jscss/demoimg/201007/nav_bg.gif) repeat-x top center;}

#index_nav li div a{color:#fff;}

#index_nav li div a:hover{text-decoration:none;}

</style>

jQuery(function(){

jQuery('#index_nav li').hover(

function(){

jQuery(this).find('.n1').stop().animate({opacity:'0',top:'43px'});

function(){

jQuery(this).find('.n1').stop().animate({opacity:'1',top:'0px'});

}

);

});

</script>

</head>

<body>

<span style="color:#FFFFFF;">　　友情提示：若提示网页有错或看不到效果，请刷新网页后再试！</span><br>

<ul>

<li id="index_nav_about"><div><span class="n1">关于</span><span class="n2">About</span></div></li>

<li id="index_nav_service"><div><span class="n1">服务</span><span class="n2">Services</span></div></li>

<li id="index_nav_cases"><div><a href="#"><span class="n1">案例</span><span class="n2">Cases</span></a></div></li>

<li id="index_nav_adva"><div><span class="n1">优势</span><span class="n2">Advantages</span></div></li>

<li id="index_nav_contact"><div><span class="n1">联系</span><span class="n2">Contact</span></div></li>

</ul>

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

更多信息请查看IT技术专栏

上一篇：jQuery实现锚点scoll效果实例分析

下一篇：jQuery实现Div拖动+键盘控制综合效果的方法

手机网站地址：jQuery仿Flash上下翻动的中英文导航菜单实例

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！