jQuery仿Flash上下翻动的中英文导航菜单实例


Posted in Javascript onMarch 10, 2015

本文实例讲述了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(/jscss/demoimg/201007/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(/jscss/demoimg/201007/nav_bg.gif) repeat-x top center;font-size:13px;}

#index_nav li div .n2{z-index:11;background:url(/jscss/demoimg/201007/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="/ajaxjs/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 相关文章推荐
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
node.js中express-session配置项详解
May 31 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 #Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 #Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 #Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 #Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 #Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 #Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 #Javascript
You might like
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
Java中final关键字详解
2015/08/10 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
JS实现图片切换特效
2019/12/23 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Python实现KNN邻近算法
2021/01/28 Python
Python中的heapq模块源码详析
2019/01/08 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python如何输出百分比
2020/07/31 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
家长对孩子评语
2014/01/30 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
消防安全员岗位职责
2014/03/10 职场文书
初三学生个人自我评定
2014/04/06 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
团代会开幕词
2015/01/28 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
活动经费申请报告
2015/05/15 职场文书
小学教师教学随笔
2015/08/14 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
同学聚会开幕词
2019/04/02 职场文书