JQuery学习(3)

页面导航:首页 > 网络编程 > JavaScript > JQuery学习(3)

JQuery学习(3)

来源: 作者: 时间:2016-02-19 09:19 【

创建精灵界面导航: 有下面图,合理的布局让图片正确显示: 先写导航栏html代码: Search


创建精灵界面导航:

有下面图,合理的布局让图片正确显示:

\

先写导航栏html代码:


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

意思一下:从左到右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 mouut
	}); // end hover function 
}); // end function

}); // end document ready function

辅助:

去除ul的列表结构:

  #spriteNav {
      height: 30px;
      list-style: none;
      margin: 0;
      padding: 0;
   }
   
   #spriteNav li {
      float: left;
   }




Tags:

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <