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 相关文章推荐
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
详解如何webpack使用DllPlugin
Sep 30 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python线程指南详细介绍
2017/01/05 Python
python书籍信息爬虫实例
2018/03/19 Python
Python中偏函数用法示例
2018/06/07 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
大学秋游活动方案
2014/02/11 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
公司授权委托书样本
2014/09/15 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
法定授权委托证明书
2015/06/18 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server