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 相关文章推荐
DOM 基本方法
Jul 18 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
angular4自定义组件详解
Sep 28 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
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
编译问题
2006/10/09 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
定义select的边框颜色
2008/04/28 Javascript
JavaScript Prototype对象
2009/01/07 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
python实现维吉尼亚加密法
2019/03/20 Python
Python面向对象进阶学习
2019/05/21 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
python中最小二乘法详细讲解
2021/02/19 Python
《乡愁》教学反思
2014/02/18 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2019新员工心得体会
2019/06/25 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书