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 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
JavaScript实现alert弹框效果
Nov 19 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的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
php 文件上传实例代码
2012/04/19 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
Python tkinter事件高级用法实例
2018/01/31 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
Python shutil模块用法实例分析
2019/10/02 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
五年级语文教学反思
2016/03/03 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
MySQL 十大常用字符串函数详解
2021/06/30 MySQL