使用jQuery创建菜单切换时背景渐变动画

Beautiful Background Image Navigation with jQuery

教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1167
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <link rel="stylesheet" href="https://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/css/style.css" type="text/css" media="screen"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                font-family:Arial;
                padding-top:30px;
                background:#FFF9DF url(https://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/title.png) no-repeat top center;
            }
        </style>
        
    </head>
    <body>
        <div id="content">
            <div id="menuWrapper" class="menuWrapper bg1">
                <ul class="menu" id="menu">
                    <li class="bg1" style="background-position:0 0;">
                        <a id="bg1" href="#">Our Passion</a>
                        <ul class="sub1" style="background-position:0 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                        </ul>
                    </li>
                    <li class="bg1" style="background-position:-266px 0px;">
                        <a id="bg2" href="#">Our Brands</a>
                        <ul class="sub2" style="background-position:-266px 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                        </ul>
                    </li>
                    <li class="last bg1" style="background-position:-532px 0px;">
                        <a id="bg3" href="#">Contact</a>
                        <ul class="sub3" style="background-position:-266px 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        
        <script type="text/javascript" src="/uploads/160101/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="https://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/jquery.bgpos.js"></script>
        <script type="text/javascript">
            $(function() {
                /* position of the <li> that is currently shown */
                var current = 0;
                
                var loaded  = 0;
                for(var i = 1; i <4; ++i)
                    $('<img />').load(function(){
                        ++loaded;
                        if(loaded == 3){
                            $('#bg1,#bg2,#bg3').mouseover(function(e){
                                
                                var $this = $(this);
                                /* if we hover the current one, then don't do anything */
                                if($this.parent().index() == current)
                                    return;

/* item is bg1 or bg2 or bg3, depending where we are hovering */
                                var item = e.target.id;

/*
                                this is the sub menu overlay. Let's hide the current one
                                if we hover the first <li> or if we come from the last one,
                                then the overlay should move left -> right,
                                otherwise right->left
                                 */
                                if(item == 'bg1' || current == 2)
                                    $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){
                                        $(this).find('li').hide();
                                    });
                                else
                                    $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
                                        $(this).find('li').hide();
                                    });

if(item == 'bg1' || current == 2){
                                    /* if we hover the first <li> or if we come from the last one, then the images should move left -> right */
                                    $('#menu > li').animate({backgroundPosition:"(-800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
                                    move(1,item);
                                }
                                else{
                                    /* if we hover the first <li> or if we come from the last one, then the images should move right -> left */
                                    $('#menu > li').animate({backgroundPosition:"(800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
                                    move(0,item);
                                }

/*
                                We want that if we go from the first one to the last one (without hovering the middle one),
                                or from the last one to the first one, the middle menu's overlay should also slide, either
                                from left to right or right to left.
                                 */
                                if(current == 2 && item == 'bg1'){
                                    $('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
                                }
                                if(current == 0 && item == 'bg3'){
                                    $('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(266px 0)"},300);
                                }

/* change the current element */
                                current = $this.parent().index();
                                
                                /* let's make the overlay of the current one appear */
                               
                                $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
                                    $(this).find('li').fadeIn();
                                });
                            });
                        }   
                    }).attr('src', 'https://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/images/'+i+'.jpg');
                
                            
                /*
                dir:1 - move left->right
                dir:0 - move right->left
                 */
                function move(dir,item){
                    if(dir){
                        $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
                        $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
                        $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},400,function(){
                            $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
                        });
                    }
                    else{
                        $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
                            $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
                        });
                        $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
                        $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},200);
                    }
                }
            });
        </script>
    </body>
</html>

Beautiful Background Image Navigation with jQuery

教程

编辑器支持Emmet

快捷键

Beautiful Background Image Navigation with jQuery

教程

使用jQuery和CSS3创建日夜场景切换动画

使用jQuery创建百叶窗翻转动画的电子广告牌

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：