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



    


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。