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;
   }