jQuery实现Flash效果上下翻动的中英文导航菜单代码


Posted in Javascript onSeptember 22, 2015

本文实例讲述了jQuery实现Flash效果上下翻动的中英文导航菜单代码。分享给大家供大家参考。具体如下:

这是一款jQuery实现Flash效果鼠标感应式的翻动导航菜单,支持中英文切换,所使用的jQuery类库版本为1.3.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>
<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(images/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(images/nav_bg.gif) repeat-x top center;font-size:13px;}
#index_nav li div .n2{z-index:11;background:url(images/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="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 相关文章推荐
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 #Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 #Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 #Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 #Javascript
Java Mybatis框架入门基础教程
Sep 21 #Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 #Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 #Javascript
You might like
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
PHP经典面试题集锦
2015/03/19 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
Python中常用信号signal类型实例
2018/01/25 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
体育教师工作总结的自我评价
2013/10/10 职场文书
企业厂长岗位职责
2013/12/17 职场文书
新春文艺演出主持词
2014/03/27 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
小学美术教学反思
2016/02/17 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
Golang实现AES对称加密的过程详解
2021/05/20 Golang
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript