JQuery学习(3)

    创建精灵界面导航：

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

    先写导航栏html代码：

<div id="navMenu">
            <ul id="spriteNav">
                <li><a href="search.php" rel="searchWindow" class="modal" id="search"><span>Search</span></a></li>
                <li><a href="register.php" rel="registerWindow" class="modal" id="register"><span>Register</span></a></li>
                <li><a href="login.php" rel="loginWindow" class="modal" id="login"><span>Login</span></a></li>
            </ul>   
        </div>

    最重要的是了解图片的尺寸：

    意思一下：从左到右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;
   }