这个示例来自于 A List Apart。 我们要做的事情就是，把上一节中的图片作 Sprites，做一个看起来还不错的导航栏。最终效果如右图所示：

先把 HTML 搞起来。通常写 HTML 的原则有两个：简介其一、语义化其二。把语义化作为重要准则的原因也有两个， SEO 和可用性。因为搜索引擎的爬虫和屏幕阅读器都不会识别通过 CSS 后加的图片、文字，它们只认 HTML。 代码如右图下方所示。

接下来，配上 CSS。首先，将这个菜单的高宽设置为背景图大小，配上背景图；把 <li/> 的默认属性重置掉。 关于 position 的部分说起来容易话长， 对这方面不熟的童鞋建议看看《十步走学会 CSS Position》。 简单地说这里的代码就是让每个菜单条目使用绝对定位，方便布置鼠标悬停的效果。

#skyline {
    width: 400px; height: 200px;
    background: url(test-3.jpg);
    margin: 10px auto; padding: 0;
    position: relative;
}
#skyline li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;
}
#skyline li, #skyline a {
    height: 200px; display: block;
}
#panel1b {left: 0; width: 95px;}
#panel2b {left: 96px; width: 75px;}
#panel3b {left: 172px; width: 110px;}
#panel4b {left: 283px; width: 117px;}

布置好菜单之后，通过 a:hover 加上特效：

#panel1b a:hover {
    background: transparent url(test-3.jpg) 0 -200px no-repeat;
}
#panel2b a:hover {
    background: transparent url(test-3.jpg)
    -96px -200px no-repeat;
}
#panel3b a:hover {
    background: transparent url(test-3.jpg)
    -172px -200px no-repeat;
}
#panel4b a:hover {
    background: transparent url(test-3.jpg)
    -283px -200px no-repeat;
}

这个例子应用 CSS Sprites 的方式有点特别，经典应用方式是背景图片只指定一次， 需要的时候再去改 background-position。这个做法是个 Workaround，而非 Fix，主要原因是 IE6 里头的一个 bug：如果 IE 的缓存控制设置为不缓存，每次都去服务器取资源的话， 背景图会闪（解决方式）。

下面，我们通过求是设计的博客，来做一个更为纯粹的示例。

求是博客的导航栏，是一个比上例更为经典的 CSS Sprites 应用。 它的背景图片 是一张包括常态、鼠标悬停之后、disable 之后三个效果的图片，并对应求是设计各个模块。

HTML 如前文所述，遵循简明扼要、语义化的规则。注意这里虽然最终效果里头并不需要文字， 但是依然写明，并通过 text-indent 将它设为不可见。实际的代码中，还含有 title、target 等属性。title 用来鼠标悬停时提示说明，target="_blank" 则告诉浏览器要新开一个窗口或者标签。 此处为了简明，略去了。有 Firebug 的童鞋，可以查看右侧的示例元素。

关于 #menu li a 的 CSS 声明：

#menu li a {
    background:url("http://blog.qiushid.com/wp-content/themes/qiushid/images/navitems.gif") no-repeat scroll 0 -468px transparent;
    display:block;
    float:left;
    height:26px;
    text-indent:-999em;
    width:85px;
}

因为每个模块对应的图标都不一样，所以实际位置通过 #menu li a.class 指定。以首页（home）为例：

#menu li.home a {
    background-position: 0 -182px;
}
#menu li.home a:hover {
    background-position: 0 0;
}

其余代码可以参考求是博客的 CSS 文件。

A List Apart 在几年后又发一文， 加入了 JavaScript 的部分。 使用 jQuery 的 .fadeIn(), slideDown() 等 UI 方面的方法，来模拟淡入淡出等效果。 原文的示例代码不很清爽，就不再转用。下面是参考 hover 文档 做的求是博客导航栏的基础上制作的示例。

有没有 jQuery is the new <blink/> 的错觉？廉价的特效，廉价的代码：

    $("#qiushid-menu").find("a").hover(function() {
        $(this).fadeOut(500, function() {
            $(this).fadeIn(500);
        });
    }, function() {
        $(this).fadeIn(100);
    });

这么做的问题也很明显。如果用户玩导航栏，在那上面划来划去，之前的淡入淡出效果并不会消失， 而是慢慢做完。后果就是，鼠标甩过去之后导航栏闪个不停。修正的方法是每次 mouseenter、mouseleave 的时候判断是否正在特效进行中，如果是就清除。 下面的例子思路跟这个是一样的，所以这个例子的方法我就不再说了。

下面，我们做个高级一点的，jQuery 版本的 <marquee/>。 我们知道，求是设计的导航栏的背景图是在鼠标悬停（hover）的时候，通过调整 background-position 得到效果。现在呢，就要用 JavaScript 让这个过程慢一点。

实际执行代码请查看本页面源代码末尾的 JavaScript 部分，这里就伪代码介绍一下。

    var yPosMap = {     // 最独立的办法自然是从 CSS 里头取，但是感觉费力
        home: [-182, 0],
        camp: [-260, -78],
        bookstore: [-286, -104],
        microblog: [-338, -156],
        network: [-312, -130]
    };
    var timerMap = {};  //  每个动画的定时器应该是独立的

    $marqueemenu.find('a').hover(function() {
        animate(this, 'show');
    }, function() {
        animate(this, 'hide');
    });

    function animate(block, mode) {
        clearTimers(clsName);     // 清除正在进行的动画
        if (reachTargetPosition()) {
            reset();
            return;               // 已经到了
        }
        timerMap[clsName] = setInterval(function() {
            pos = getYPos($a);
            /*
             * 最关键的语句，CSS Sprites 就是这么回事：
             */
            $a.css('background-position', '0 '+(pos+delta)+'px');
            if (reachTargetPostion()) {
                clearInterval(timerMap[clsName]);
                reset();
            }
        }, 10);
    }

我们的示例到这还没结束。

jQuery 自带了个 .animate()，但是对个别 CSS 属性的动画支持并不好。有达人做了个 jQuery Bg Pos 补丁 让 jQuery 可以以 background-position 做动画。实际效果可以看右方示例。 有没有觉得示例四很有重复发明轮子的嫌疑？

详细内容，不妨移步 Snook 的博文 和他的示例。这里简单讲述一下用法。

首先要在页面上引入 jQuery 与 jQuery.bgPos 插件。后者的内容并不多， 不妨把它并入你的网站的主 JavaScript 文件里头去。

lt;script type="text/javascript" src="jquery-1.4.2.min.js">lt;/script>
lt;script type="text/javascript" src="jquery.bgpos.js">lt;/script>

然后是使用：

    $('#snook-menu').find('a')
        .css( {backgroundPosition: "-20px 35px"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(-20px 94px)"},
                                   {duration:500})
        })
        .mouseout(function(){
            $(this).stop().animate({backgroundPosition:"(40px 35px)"},
                                   {duration:200, complete:function(){
                $(this).css({backgroundPosition: "-20px 35px"})
            }})
        });

为需要特效的空间注册鼠标移入移出的响应函数，也可以使用前面示例的 .hover() 简写。 重点代码是 .animate() 的参数部分。第一个就是特效的结束值，.animate() 会根据这个值计算应该如何动画，详细的过程与示例四的 animate() 函数相仿。

第二个（{duration:200, complete:function(){}}）是其他参数，前者是动画的持续时间， 后者是当动画完成之后的回调。示例中的回调将控件重置，主要是针对动画结束背景图位置有偏差的情况。