js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > 导航菜单

jQuery鼠标悬停导航底部边框线条伸缩动画效果

发布时间:2015-08-29 16:02:52    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jQuery鼠标悬停导航底部边框线条伸缩动画效果
<!doctype html>    
<html>    
<head>    
	<meta charset="utf-8">    
	<title>jQuery鼠标悬停导航底部边框线条伸缩动画效果</title>    
	<style>    
		*{ margin:0; padding:0; list-style:none;}    
		img{ border:0;}    
		.header{ width:100%; background:#F5F5F5;}    
		.nav{ width:1000px; margin:0 auto; overflow:hidden;}    
		.nav ul li{ height:40px; line-height:40px; float:left; padding:10px 5px; margin:0px 5px;position:relative;}    
		.nav ul li a{ color:#666; font-family:'Microsoft Yahei'; font-size:14px; text-decoration:none;}    
		.nav ul li a:hover{ color:#000; text-decoration:none;}    
		.nav ul li span{ display:block; position:absolute; width:0px; height:0px; background:#1FAEFF; top:58px; left:50%;}    
	</style>    
</head>    
<body>    
	<div class="header">    
		<div class="nav">    
			<ul>    
				<li><a href='http://www.jstxdm.com'>首页</a><span></span></li>    
				<li><a href='http://www.jstxdm.com'>Flash素材</a><span></span></li>    
				<li><a href='http://www.jstxdm.com/c-2.html'>菜单导航</a><span></span></li>    
				<li><a href='http://www.jstxdm.com'>时间日期</a><span></span></li>    
				<li><a href='http://www.jstxdm.com/c-1.html'>焦点图</a><span></span></li>    
				<li><a href='http://www.jstxdm.com/c-3.html'>tab标签</a><span></span></li>    
				<li><a href='http://www.jstxdm.com'>jquery特效</a><span></span></li>    
				<li><a href='http://www.jstxdm.com/c-4.html'>在线客服</a><span></span></li>    
				<li><a href='http://www.jstxdm.com/c-10.html'>广告代码</a><span></span></li>    
				<li><a href='http://www.jstxdm.com/c-7.html'>相册代码</a><span></span></li>    
				<li><a href='http://www.jstxdm.com/c-6.html'>图片特效</a><span></span></li>    
				<li><a href='http://www.jstxdm.com'>名站特效</a><span></span></li>    
				<li><a href='http://www.jstxdm.com/c-11.html'>其他代码</a><span></span></li>    
			</ul>    
		</div>    
	</div>    
	<script src="jquery-1.7.2.min.js"></script>    
	<script>    
		$(function(){    
			$('.nav li').hover(function(){    
				$('span',this).stop().css('height','2px');    
				$('span',this).animate({    
					left:'0',    
					width:'100%',    
					right:'0'    
				},200);    
			},function(){    
				$('span',this).stop().animate({    
					left:'50%',    
					width:'0'    
				},200);    
			});    
		});    
	</script>    
</body>    
</html>



动画

jquery点击切换,3d淡入动画,头像相册特效

jQuery+CSS3 实现动画图片相册,大图全屏展示,前后翻页特效代码

jQuery鼠标悬停导航底部边框线条伸缩动画效果

jQuery鼠标悬停内容动画切换效果

css3鼠标滑过栏目图片滑动切换动画特效

jquery.fullPage插件,仿网易邮箱6.0介绍上下滚动动画效果

jquery实现飘动的云朵动画特效

jquery实现动画悬浮图标菜单特效

css3对话框插件来制作动画弹出表单特效

jquery实现浮层跟随图片动画特效

js+html5粒子效果浪漫表白的粒子文字动画特效

win8扁平风格宽屏焦点图片动画轮播特效

css3实现图标菜单,鼠标滑过图标动画菜单特效

css3旋转动画,制作鼠标经过圆形旋转特效

jquery+html5日历控件,制作多皮肤动画日历选择器特效

jQuery流星雨动画特效,jq流星雨特效代码

html5实现鼠标悬停图片动画展示特效

js+css3 实现扁平化APP图标黄色时钟,动画特效

jquery实现鼠标悬停图片动画显示文字信息特效

jQuery加入购物车产品飞入动画特效