jQuery仿Flash上下翻动的中英文导航菜单实例
本文实例讲述了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程序设计有所帮助。
相关推荐
-
php+flash+jQuery多图片上传源码分享
flash+php多图片上传的源码,测试成功,一个经典的上传源码,为什么要用flash作为上传的组件呢,其实这里不仅仅是flash,另加了jquery的技术,这样做的目的是为了更好更方便的管理图片,使用过QQ空间进行上传图片的童鞋都知道,QQ空间的上传体验度很好,而且管理我们上传的图片非常的方便,使用的技术基本上就是flash与jquery技术了. flash+jquery是作为前端图片上传展示的,还需要与php的结合才能将图片上传到指定的目标,这里的php一共有两个文件,一个upload.ph
-
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
本文实例讲述了jQuery模拟实现经典FLASH导航动画效果的方法.分享给大家供大家参考,具体如下: 一.前言: FLASH在中国互联网发展初期的时候非常的热,各种各样的矢量造型和动作,加上专门配制的音效,让很多人眼前一亮,并且让很多人迷上了这种新兴的媒体,那时候兴起了很多大大小小的专门发布FLASH的网站,印象中记得的像"FLASH闪吧"."FLASH帝国"."闪客天地"等这些都是很火很热的网站,在当时盛极一时,由此也产生了一大批的专门从事FL
-
jquery实现仿Flash的横向滑动菜单效果代码
本文实例讲述了jquery实现仿Flash的横向滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一个仿Flash的jquery滑动菜单,横向,延时效果明显,如果觉得延时太长的话,自己可以修改参数,通过这个菜单主要是想向大家掌握一些jQuery生成动画的技巧,同时这也是jquery强大功能的体现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-flash-style-move-menu-codes/ 具体代码如下: <!
-
jQuery实现Flash效果上下翻动的中英文导航菜单代码
本文实例讲述了jQuery实现Flash效果上下翻动的中英文导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现Flash效果鼠标感应式的翻动导航菜单,支持中英文切换,所使用的jQuery类库版本为1.3.2. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-sx-cha-chen-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//
-
基于jquery1.4.2的仿flash超炫焦点图播放效果
好嘞!废话不多说!Code贴上!哪位高手有更好的方式可以多多指点! CSS Code 复制代码 代码如下: /* * images player * author:mr·zhong * date:2010-04-19 */ #playerBox{ width:305px; height:282px; border:1px solid #ccc; } #playerImage ul{ padding:0px; margin:0px; border:0px; list-style:none; pos
-
基于jQuery的仿flash的广告轮播
整个页面如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T
-
flash+jQuery实现可关闭及重复播放的压顶广告
特效介绍 仿门户网站首页泰山压顶式可关闭及重复播放的从上面"压"下来的广告flash+jQuery代码,广告播放的时候,会将整个页面都压下去(这要求您把html部分代码放到您网站最顶部,<body>的下面),气势恢宏. 演示图 使用方法 1.在head引入css. 2.建议,在您网站最顶部放入下面的代码,这样,广告播放,会把您页面的所有内容压下去,气势恢宏: <div class="gg_full wrapfix"> <div clas
-
超炫的jquery仿flash导航栏特效
FLASH导航现在基本上已经是过时了,但是我们可以用jQuery来实现flash效果,非常的不错. 演示地址:http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <
-
基于jQuery的仿flash的广告轮播代码
整个页面如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T
-
jQuery实现的类flash菜单效果代码
先来看看效果:http://demo.jb51.net/js/jquery_flash/demo.htm 因为下面的menu和上面的logo的实现原理一样,为了简化起见,我们这里只拿logo部分的代码来说明一下原理: HTML代码: 复制代码 代码如下: <a id="logotype" href=""><span>Logo Type</span></a> CSS代码: 复制代码 代码如下: a#logotype{ b
-
基于Jquery的仿照flash放大图片效果代码
Html: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text
-
jquery+easeing实现仿flash的载入动画
去年面试过一家做网站的 公司,看了一下他们的案例,看懂一个蛮有意思的 ,一个房地产的官网,是用flash做的.感觉不错. 于是,闲暇之际,简单的jquery 模仿做了一下.下面是我的效果图.脚本也没啥优化,流畅度也没有flash流畅.但是重要的是看到这个flash,想到 如何实现它效果的思路,非常适合新手. 观察上诉,首先左侧是个载入动画, 复制代码 代码如下: $('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',