jquery导航条鼠标滑过图片文字上下滚动



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

126 502 168



特效描述:jquery导航条 鼠标滑过图片 文字上下滚动。jquery导航条鼠标滑过图片文字上下滚动

代码结构

1. 引入JS

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

2. HTML代码

<script type="text/javascript">
$(document).ready(function(){
	var timerId = null;
	function itemShow(){
		if (timerId) return;
		timerId = setInterval(function(){
			$("#feature li.current a span").animate({top: "-55px" }, "fast");
			$("#feature li.current a p").animate({top: "-55px" }, "fast");
		}, 200);
	}
	function itemHide(){
		if (!timerId) return;
		$("#feature li.current a span").animate({top: "0px" }, "fast");
		$("#feature li.current a p").animate({top: "0px" }, "fast");
		$("#feature li.current").removeClass("current");
		clearInterval(timerId);
		timerId = null;
	}
	$("#feature li").hover(function(){
		$(this).addClass("current");
		itemShow();
	}, itemHide);
});
</script> 
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#fff;font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;}
/*----- feature -----*/
#feature li,#feature li a,#feature li a span,#feature li a p{display:block;height:55px;overflow:hidden;position:relative;cursor:pointer;}
#feature{width:150px;height:330px;overflow:hidden;margin:20px auto;}
#feature li{width:150px;}
#feature li a{background:url("images/feature2.png") no-repeat;text-decoration:none;}
#feature li a span{font-size:14px;font-weight:bold;padding-left: 68px;color:#666;line-height:55px;}
#feature li a:hover span{color:#39e;}
#feature li a p{color:#444;padding: 9px 14px 0 68px;line-height:1.5em;height:46px;}
#feature li#f1 a{background-position:0 0;}
#feature li#f1 a:hover{background-position:-150px 0;}
#feature li#f2 a{background-position:0 -55px;}
#feature li#f2 a:hover{background-position:-150px -55px;}
#feature li#f3 a{background-position:0 -110px;}
#feature li#f3 a:hover{background-position:-150px -110px;}
#feature li#f4 a{background-position:0 -165px;}
#feature li#f4 a:hover{background-position:-150px -165px;}
#feature li#f5 a{background-position:0 -220px;}
#feature li#f5 a:hover{background-position:-150px -220px;}
#feature li#f6 a{background-position:0 -275px;}
#feature li#f6 a:hover{background-position:-150px -275px;}
</style>
<ul id="feature">
	<li id="f1"><a href="http://http://www.51qianduan.com/" target="_blank"><span>开始减肥</span><p>H君带你开始减肥之旅</p></a></li>
	<li id="f2"><a href="http://http://www.51qianduan.com/" target="_blank"><span>减肥问答</span><p>解答减肥中的种种疑问</p></a></li>
	<li id="f3"><a href="http://http://www.51qianduan.com/" target="_blank"><span>减肥评估</span><p>专家评估你的减肥方法</p></a></li>
	<li id="f4"><a href="http://http://www.51qianduan.com/" target="_blank"><span>热量计算</span><p>方便的热量计算器</p></a></li>
	<li id="f5"><a href="http://http://www.51qianduan.com/" target="_blank"><span>减肥工具</span><p>简单有效的减肥好帮手</p></a></li>
	<li id="f6"><a href="http://http://www.51qianduan.com/" target="_blank"><span>减重服务</span><p>专业减重顾问帮你减肥</p></a></li>
</ul><!--feature end-->



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


热门标签: 滚动导航菜单 二级导航菜单 滚动切换 下拉导航菜单 图片滚动 竖直导航菜单 文字滚动 图标导航菜单 固定导航菜单 图片文字滚动 侧边导航菜单 全屏滚动 树形导航菜单 页面滚动 网址导航菜单 导航菜单插件 文字导航菜单 滚动流动 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 自动滚动图片轮播 导航菜单导航条

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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