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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
javascript 学习之旅 (2)
Feb 05 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
详解vue中axios的封装
Jul 18 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
js验证密码强度解析
Mar 18 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版
2012/04/20 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
在Python中使用Neo4j数据库的教程
2015/04/16 Python
九步学会Python装饰器
2015/05/09 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
会计出纳岗位职责
2015/03/31 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
2016国庆促销广告语
2016/01/28 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL
netty 实现tomcat的示例代码
2022/06/05 Servers