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模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
js精确的加减乘除实例
Nov 14 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
利用javaScript处理常用事件详解
Apr 14 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
索尼ICF-SW100收音机评测
2021/03/02 无线电
phpize的深入理解
2013/06/03 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
js加强的经典分页实例
2013/03/15 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
基于React+Redux的SSR实现方法
2018/07/03 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
详解Golang 与python中的字符串反转
2017/07/21 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
德国购买健身器材:AsVIVA
2017/08/09 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
《愚公移山》教学反思
2014/02/20 职场文书
授权委托书怎么写
2014/04/03 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
赢在执行观后感
2015/06/16 职场文书