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 入门教程 [翻译] 推荐
Aug 17 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
小程序实现点击tab切换左右滑动
Nov 16 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微信开发之查询微信精选文章
2016/06/23 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
Python实现爬取逐浪小说的方法
2015/07/07 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
快递业务员岗位职责
2014/01/06 职场文书
保密承诺书范文
2014/03/27 职场文书
给孩子的新年寄语
2014/04/08 职场文书
初中班主任评语
2014/04/24 职场文书
2015年技术员工作总结
2015/04/10 职场文书
2015中学教学工作总结
2015/07/22 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
python读取mat文件生成h5文件的实现
2022/07/15 Python