JQuery學習(3)

JQuery學習(3)

建立精靈介面導航：

有下面圖，合理的布局讓圖片正確顯示：

先寫導覽列html代碼：

            
 
                
  
Search
                
  
Register
                
  
Login
            
 
           

最重要的是瞭解圖片的尺寸：

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