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

jQuery古典风格鼠标滑过动画菜单导航

时间:2014-05-21      来源:互联网     
特效说明:
一款jQuery古典风格鼠标滑过动画菜单导航网页特效,开场动画菜单展示,鼠标滑过动画展示选中项,鼠标移出动画消失选中项、网页制作不错的js导航效果。(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)
使用方法:
1、调用CSS样式:
<link rel="stylesheet" href="css/style.css" type="text/css" />

2、调用JS插件代码:
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<!--[if IE 6]>
<script src="js/ie6PNG.js" type="text/javascript"></script>
<script type="text/javascript">DD_belatedPNG.fix('*');</script>
<![endif]-->


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

4、JS代码:
<script type="text/javascript">
$(function(){
    var d=1000;
    $('#menu span').each(function(){
        $(this).stop().animate({
            'top':'-122px'
        },d+=250);
    });
    $('#menu .aaa').each(function(){
        $(this).stop().animate({
            'top':'0px'
        },d+=250);
    });
    $('#menu .aaa').each(function(){
        $(this).stop().animate({
            'top':'0px'
        });
    });
    $('#menu > li').hover(function(){
        var $this = $(this);
        $('a',$this).addClass('hover');
        $('span',$this).stop().animate({'top':'0px'},300).css({'zIndex':'-1'});
    },function(){
        if(!$(this).hasClass("current"))
        {
        var $this = $(this);
        $('a',$this).removeClass('hover');
        $('span',$this).stop().animate({'top':'-122px'},800).css({'zIndex':'-1'});
        }
    });
    
});
</script>
相关特效
  • HTML5科幻空间动画背景网页特效

    HTML5科幻空间动画背景网页特效

    一款HTML5科幻空间动画背景网页特效免费下载,该网页特效适用于游戏、科技类网站制作、网页设计背景代码素材。……
    2019-04-12
  • jQuery五彩缤纷心形冒泡动画特效

    jQuery五彩缤纷心形冒泡动画特效

    一款jQuery五彩缤纷心形冒泡动画特效下载,该jQuery特效是随机彩色心形从许愿瓶不断冒泡动画展示特效。……
    2018-04-04
  • jQuery闪烁粒子动画背景特效

    jQuery闪烁粒子动画背景特效

    一款jQuery闪烁粒子动画背景特效免费下载,该特效基于jquery.parallax.js插件编写,闪烁星空动画背景,页面元素随鼠标运动而运动。……
    2016-12-23
  • jQuery手指滑动刻度尺选择值特效

    jQuery手指滑动刻度尺选择值特效

    一款jQuery手指滑动刻度尺选择值特效免费下载,该特效适用于微信网站、手机站等移动端触屏设备使用,可以用手指左右滑动选择刻度值。……
    2016-12-01
  • SVG制作旋转地图动画

    SVG制作旋转地图动画

    一款SVG制作旋转地图动画免费下载,该SVG地球特效自适应兼容主流浏览器。……
    2016-12-01
  • jQuery响应式层叠动画切换内容网页特效

    jQuery响应式层叠动画切换内容网页特效

    一款jQuery响应式层叠动画切换内容网页特效免费下载,该特效基于jquery.transit.js实现,支持PC、PAD、Phone设备浏览,兼容CSS3动画切换效果。……
    2016-11-14
  • aos.js-超赞页面滚动元素动画jQuery动画库

    aos.js-超赞页面滚动元素动画jQuery动画库

    一款aos.js-超赞页面滚动元素动画jQuery动画库源码下载,该动画库可以在页面滚动时提供28种不同的动画元素展示效果,以及多种easing效果。在页面往回滚动时,元素会恢复到原来的状态。……
    2016-07-08
  • jQuery+CSS3登录/注册动画窗口网页特效

    jQuery+CSS3登录/注册动画窗口网页特效

    一款jQuery+CSS3登录/注册动画窗口特效代码下载,该网页特效是一款采用UI界面设计风格,配合使用CSS3动画和少量jQuery代码来制作,整体感觉时尚大方。……
    2016-06-28
  • HTML5实现ppt全屏幻灯片演示网页模版

    HTML5实现ppt全屏幻灯片演示网页模版

    HTML5实现ppt全屏幻灯片演示网页模版下载,该HTML5网页模版是一款基于html5实现的网页旋转、移动切换PPT展示效果。……
    2016-06-28
  • jQuery鼠标经过显示动画边框特效

    jQuery鼠标经过显示动画边框特效

    一款jQuery鼠标经过显示动画边框特效下载,该JS代码基于jQuery制作的鼠标经过图片、描述文字动画绘制边框特效,适用于图文列表展示代码。……
    2016-06-25

最新更新特效

设计分享