jquery导航条鼠标悬停图标导航图片文字上下翻滚实现源码
淘建站为您提供更多_导航菜单_图标导航_导航_鼠标，在此特别感谢您对我们的支持与厚爱！
查看演示
演示不了，点击反馈
加入收藏
下载 484 次
打赏作者
觉得不错，可打赏下作者
下载资源
免费共享
特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。
<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><ul id="feature">
<li id="f1"><a href="http://www.sucaiq.com/" target="_blank"><span>开始减肥</span><p>H君带你开始减肥之旅</p></a></li>
<li id="f2"><a href="http://www.sucaiq.com/" target="_blank"><span>减肥问答</span><p>解答减肥中的种种疑问</p></a></li>
<li id="f3"><a href="http://www.sucaiq.com/" target="_blank"><span>减肥评估</span><p>专家评估你的减肥方法</p></a></li>
<li id="f4"><a href="http://www.sucaiq.com/" target="_blank"><span>热量计算</span><p>方便的热量计算器</p></a></li>
<li id="f5"><a href="http://www.sucaiq.com/" target="_blank"><span>减肥工具</span><p>简单有效的减肥好帮手</p></a></li>
<li id="f6"><a href="http://www.sucaiq.com/" target="_blank"><span>减重服务</span><p>专业减重顾问帮你减肥</p></a></li>
</ul><!--feature end-->
