jquery背景切换导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery背景切换导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Beautiful Background Image Navigation with jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Beautiful Background Image Navigation with jQuery" />
    <meta name="keywords" content="jquery, background image, animate, menu, navigation, css3, cross-browser compatible" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial;
            padding-top: 30px;
            background: #FFF9DF url(title.png) no-repeat top center;
        }

        a.back {
            background: transparent url(back.png) no-repeat 0px 0px;
            position: absolute;
            width: 150px;
            height: 27px;
            outline: none;
            top: 2px;
            right: 0px;
        }

        .reference {
            margin: 20px auto;
            width: 600px;
            padding: 20px;
        }

        .reference p a {
            text-transform: uppercase;
            text-shadow: 1px 1px 1px #fff;
            color: #666;
            text-decoration: none;
            font-size: 10px;
        }

        .reference p a:hover {
            color: #333;
        }
    </style>
    <!--[if lte IE 6]>
         <link rel="stylesheet" href="css/styleIE6.css" type="text/css" media="screen"/>
    <![endif]-->
</head>
<body>
    <div id="content">

        <a class="back" href="http://www.baidu.com/"></a>
        <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>
    <!-- The JavaScript -->
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="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', '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>

JS代码(jquery.bgpos.js):

/** * @author Alexander Farkas * v. 1.21 */
(function($){
	if(!document.defaultView || !document.defaultView.getComputedStyle){
	// IE6-IE8var oldCurCSS = jQuery.curCSS;
	jQuery.curCSS = function(elem,name,force){
	if(name === 'background-position'){
	name = 'backgroundPosition';
}
if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){
	return oldCurCSS.apply(this,arguments);
}
var style = elem.style;
	if ( !force && style && style[ name ] ){
	return style[ name ];
}
return oldCurCSS(elem,'backgroundPositionX',force) +' '+ oldCurCSS(elem,'backgroundPositionY',force);
}
;
}
var oldAnim = $.fn.animate;
	$.fn.animate = function(prop){
	if('background-position' in prop){
	prop.backgroundPosition = prop['background-position'];
	delete prop['background-position'];
}
if('backgroundPosition' in prop){
	prop.backgroundPosition = '('+ prop.backgroundPosition;
}
return oldAnim.apply(this,arguments);
}
;
	function toArray(strg){
	strg = strg.replace(/left|top/g,'0px');
	strg = strg.replace(/right|bottom/g,'100%');
	strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
	var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
	return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
$.fx.step. backgroundPosition = function(fx){
	if (!fx.bgPosReady){
	var start = $.curCSS(fx.elem,'backgroundPosition');
	if(!start){
	//FF2 no inline-style fallbackstart = '0px 0px';
}
start = toArray(start);
	fx.start = [start[0],start[2]];
	var end = toArray(fx.options.curAnim.backgroundPosition);
	fx.end = [end[0],end[2]];
	fx.unit = [end[1],end[3]];
	fx.bgPosReady = true;
}
//return;
	var nowPosX = [];
	nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
	nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
	fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
}
;
}
)(jQuery);

CSS代码(style.css):

.menuWrapper{font-family:"Trebuchet MS",Arial,sans-serif;font-size:15px;font-style:normal;font-weight:normal;text-transform:uppercase;letter-spacing:normal;line-height:1.45em;position:relative;margin:20px auto;height:542px;width:797px;background-position:0 0;background-repeat:no-repeat;background-color:transparent;}
ul.menu{list-style:none;width:797px;}
ul.menu > li{float:left;width:265px;height:542px;border-right:1px solid #777;background-repeat:no-repeat;background-color:transparent;}
ul.menu > li.last{border:none;}
.bg1{background-image:url(../images/1.jpg);}
.bg2{background-image:url(../images/2.jpg);}
.bg3{background-image:url(../images/3.jpg);}
ul.menu > li > a{float:left;width:265px;height:50px;margin-top:450px;text-align:center;line-height:50px;color:#ddd;background-color:#333;letter-spacing:1px;cursor:pointer;text-decoration:none;text-shadow:0px 0px 1px #fff;}
ul.menu > li ul{list-style:none;float:left;margin-top:-180px;width:100%;height:110px;padding-top:20px;background-repeat:no-repeat;background-color:transparent;}
ul.menu > li ul li{display:none;}
ul.menu > li ul.sub1{background-image:url(../images/bg1sub.png);}
ul.menu > li ul.sub2{background-image:url(../images/bg2sub.png);}
ul.menu > li ul.sub3{background-image:url(../images/bg3sub.png);}
ul.menu > li ul li a{color:#fff;text-decoration:none;line-height:30px;margin-left:20px;text-shadow:1px 1px 1px #444;font-size:11px;}
ul.menu > li ul.sub1 li{display:block;}
ul.menu > li ul li a:hover{border-bottom:1px dotted #fff;}

附件:下载该文件资源,减少时间成本(增值服务)