素材网 素材网

jquery制作简单实用导航条flash动画

下载资源()次

阅读次数()次

发布时间:2014-01-30

jquery制作简单实用导航条flash动画
分享到:

用法简介:

来源:xw素材网

jquery制作简单实用导航条flash动画。

调用代码:

$(document).ready(function(){
	//实例一
	$("#menu li a").wrapInner('<span class="out"></span>' ).append('<span class="bg"></span>');
	$("#menu li a").each(function(){
		$('<span class="over">' +  $(this).text() + '</span>').appendTo(this);
	});
	$("#menu li a").hover(function(){
		$(".out",this).stop().animate({'top':'45px'},250);
		$(".over",this).stop().animate({'top':'0px'},250);
		$(".bg",this).stop().animate({'top':'0px'},120);
	},function(){
		$(".out",this).stop().animate({'top':'0px'},250);
		$(".over",this).stop().animate({'top':'-45px'},250);
		$(".bg",this).stop().animate({'top':'-45px'},120);
	});
	//实例一
	$("#menu2 li a").wrapInner('<span class="out"></span>');
	$("#menu2 li a").each(function(){
		$('<span class="over">' + $(this).text() + '</span>').appendTo(this);
	});
	$("#menu2 li a").hover(function(){
		$(".out",this).stop().animate({'top':'45px'},200);
		$(".over",this).stop().animate({'top':	'0px'},200);
	},function(){
		$(".out",this).stop().animate({'top':'0px'},200);
		$(".over",this).stop().animate({'top':'-45px'},200);
	});
});

页面结构:

<h2>实例1、</h2>
		<div id="menu" class="menu">
			<ul>
				<li><a href="http://www.xwcms.net/">网站首页</a></li>
				<li><a href="http://www.xwcms.net/">项目案例</a></li>
				<li><a href="http://www.xwcms.net/">售后服务</a></li>
				<li><a href="http://www.xwcms.net/">技术支持</a></li>
				<li><a href="http://www.xwcms.net/">联系我们</a></li>
			</ul>
		</div>
		<h2>实例2、</h2>
		<div id="menu2" class="menu">
			<ul>
				<li><a href="http://www.xwcms.net/">网站首页</a></li>
				<li><a href="http://www.xwcms.net/">项目案例</a></li>
				<li><a href="http://www.xwcms.net/">售后服务</a></li>
				<li><a href="http://www.xwcms.net/">技术支持</a></li>
				<li><a href="http://www.xwcms.net/">联系我们</a></li>
			</ul>
		</div>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。