添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 网页特效 > 导航 | 菜单 >

jQuery鼠标悬停上下翻滚动画导航菜单

时间:2015-08-03      来源:互联网     
特效说明:
一款jQuery鼠标悬停上下翻滚动画切换状态导航菜单网页特效,该JS导航菜单代码是一款兼容所有主流浏览器(包括IE6)蓝色好看的鼠标响应式网站导航菜单特效。(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)
使用方法:
1、调用CSS样式:
<link href="css/style.css" rel="stylesheet" type="text/css" />

2、调用JS插件代码:
<script type="text/javascript" src="js/jquery.min.js"></script>

3、添加HTML代码:
将<!--效果html开始-->......<!--效果html结束-->之间的html和js代码;放在<body></body>之间。

4、JS代码:
<script type="text/javascript">
$(document).ready(function() {
    $("#menu2 li a").wrapInner( '<span class="out"></span>' );
    $("#menu2 li a").each(function() {
        $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
    });

    $("#menu2 li a").hover(function() {
        $(".out",    this).stop().animate({'top':    '48px'},    300); // move down - hide
        $(".over",    this).stop().animate({'top':    '0px'},        300); // move down - show

    }, function() {
        $(".out",    this).stop().animate({'top':    '0px'},        300); // move up - show
        $(".over",    this).stop().animate({'top':    '-48px'},    300); // move up - hide
    });

});
</script>
相关特效



最新更新特效

设计分享