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 相关文章推荐
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
HTML+JS实现在线朗读器
Feb 15 Javascript
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
php include和require的区别深入解析
2013/06/17 PHP
php图像处理类实例
2015/07/28 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
pandas分区间,算频率的实例
2019/07/04 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
django API 中接口的互相调用实例
2020/04/01 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
用python绘制樱花树
2020/10/09 Python
美国时尚女装在线:Missguided
2016/12/03 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
高级方案规划工程师岗位职责
2013/11/29 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL