古典风格的jquery鼠标悬停文字导航菜单滑动高亮显示



130 516 173



特效描述:悬停文字导航 滑动高亮显示,

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

2. 引入JS

<script type="text/javascript" src="jquery-1.3.2.js"></script>

3. HTML代码

<ul class="menu" id="menu">
	<li class="current"><span class="ipod_1 aaa"></span><a href="http://www.dijiuzhanzhang.com/"><img src="images/7.png" /></a></li>
	<li><span class="ipod_2"></span><a href="http://www.dijiuzhanzhang.com/"><img src="images/6.png" /></a></li>
	<li><span class="ipod_3"></span><a href="http://www.dijiuzhanzhang.com/"><img src="images/5.png" /></a></li>
	<li><span class="ipod_4"></span><a href="http://www.dijiuzhanzhang.com/"><img src="images/4.png" /></a></li>
	<li><span class="ipod_5"></span><a href="http://www.dijiuzhanzhang.com/"><img src="images/3.png" /></a></li>
</ul>
<script type="text/javascript">
$(function(){
	var d=1000;
	$('#menu span').each(function(){
		$(this).stop().animate({
			'top':'-122px'
		},d+=250);
	});
	$('#menu .aaa').each(function(){
		$(this).stop().animate({
			'top':'0px'
		},d+=250);
	});
	$('#menu .aaa').each(function(){
		$(this).stop().animate({
			'top':'0px'
		});
	});
	$('#menu > li').hover(function(){
		var $this = $(this);
		$('a',$this).addClass('hover');
		$('span',$this).stop().animate({'top':'0px'},300).css({'zIndex':'-1'});
	},function(){
		if(!$(this).hasClass("current"))
		{
		var $this = $(this);
		$('a',$this).removeClass('hover');
		$('span',$this).stop().animate({'top':'-122px'},800).css({'zIndex':'-1'});
		}
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
admin
关注
TA的相关作品 >>更多
热搜关键词


热门标签: 图片拖动 图片放大镜 图片叠加 图片翻转旋转 图片延迟加载 图片淡出淡进 图片全屏 图片头像上传 二维码 滑动滑过 图片广告 图片放大缩小 html5图片动画 带缩略图的幻灯片 地图 图片滚动 图片滑动 图片切换 图片收缩展开 旋转木马 图片轮播 自动滚动图片轮播 图标导航菜单 背景切换 手风琴 图表 图片 头像截图 文字滑动 图片高亮

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到