特效描述: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-->