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


Posted in Javascript onMarch 10, 2015

本文实例讲述了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>

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

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">

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>

<script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>

<script type="text/javascript"> 

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>

<div id="body">

    <div id="index_content">

        <div class="index_top">

            <div id="index_nav">

                <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>

        </div>

    </div>

</div>

</body>

</html>

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

Javascript 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 #Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 #Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 #Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 #Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 #Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 #Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 #Javascript
You might like
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Python实现的石头剪子布代码分享
2014/08/22 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
python 读取.nii格式图像实例
2020/07/01 Python
python 8种必备的gui库
2020/08/27 Python
Python爬取梨视频的示例
2021/01/29 Python
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
个人作风剖析材料
2014/02/02 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
挂职个人工作总结
2015/03/05 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书