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