脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQueryѧϰ(3)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

创建精灵界面导航：

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

vcC4ahrtbLT6wuujujwvcD4KPHA+PHByZSBjbGFzcz0="brush:java;">

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

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JQueryѧϰ(3)全部内容，希望文章能够帮你解决javascript代码实例教程-JQueryѧϰ(3)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。