创建精灵界面导航：

    有下面图，合理的布局让图片正确显示：

    先写导航栏html代码：

<div id="navMenu">
            <ul id="spriteNav">
                <li><a href=http://www.mamicode.com/"search.php" rel="searchWindow" class="modal" id="search">Search>
    最重要的是了解图片的尺寸：
    意思一下：从左到右100px,110px.90px;上下结构分别是30px; 合理布局让背景合适：
    background-position : 水平位置，竖直位置的距离
 #spriteNav li a#search {
      width: 100px;
   }
   #spriteNav li a#register {
      width: 110px;
      background-position: -100px 0px;
   }
   #spriteNav li a#login {
      width: 90px;
      background-position: -210px 0px;
   }

    还有一点
 #spriteNav li a#search span {
      background-position: 0px -30px;
   }
   #spriteNav li a#register span {
      background-position: -100px -30px;
   }
   #spriteNav li a#login span {
      background-position: -210px -30px;
   }

    最后试JQuery功能：
$(document).ready(function() { 

$(function() {
	/* 
	 * set original values - 
	 * the span is set to 0 opacity in anticipation of the hover event
	 * the text is set to be empty that it doesn't show 
	 */
	$("#spriteNav span").css("opacity", "0");
	$("#spriteNav span").text('');
	
	/* how do we hover? let me count the ways... */
	$("#spriteNav span").hover(function() {
		$(this).stop().animate({
			opacity: 1
	    }, 10); // end mousein
	}, function(){
		$(this).stop().animate({
			opacity: 0
		}, 20); // end mouseout
	}); // end hover function 
}); // end function

}); // end document ready function

    辅助：
    去除ul的列表结构：
  #spriteNav {
      height: 30px;
      list-style: none;
      margin: 0;
      padding: 0;
   }
   
   #spriteNav li {
      float: left;
   }



    

JQuery学习(3)