我看到了网上有一些例子..我就来凑个热闹..说下我自己的做法..
大家先可以看一下最终的效果 http://resume.skiyo.cn/
我的做法相对比较简单..大部分工作都是css来做的..
首先我们需要看上去差不多是下面的一张菜单图片..你可以点击之后看大图..
然后我们就来写HTML了..注意.重点就在这里..我让a在li的上面..遮盖住li..
| 以下是代码片段： <div id="menu"> <ul> <li id="nv_about"><a href="#about_anchor"> </a></li> <li id="nv_skill"><a href="#skill_anchor"> </a></li> <li id="nv_works"><a href="#works_anchor"> </a></li> <li id="nv_introduce"><a href="#introduce_anchor"> </a></li> <li id="nv_contact"><a href="#contact_anchor"> </a></li> </ul> </div> |
CSS为:| 以下是代码片段： #menu { margin-top:10px; width:800px; height:40px; } #menu li { list-style:none; float:left; } #menu li a{ display:block; } #menu #nv_about { width:160px; height:40px; background:url(../images/menu.jpg) no-repeat 0px 0px; /* 这是li的背景 统一为灰色的 */ } #menu #nv_about a{ width:160px; height:40px; background:url(../images/menu.jpg) no-repeat 0px -40px; /* li上面a的背景..是其他的颜色 */ } #menu #nv_skill { width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -160px 0px; } #menu #nv_skill a{ width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -160px -40px; } #menu #nv_works { width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -320px 0px; } #menu #nv_works a{ width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -320px -40px; } #menu #nv_introduce { width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -480px 0px; } #menu #nv_introduce a{ width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -480px -40px; } #menu #nv_contact { width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -640px 0px; } #menu #nv_contact a { width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -640px -40px; } |
然后我们就可以编写jQuery的代码了..| 以下是代码片段： $(document).ready(function (){ if($.browser.msie && (parseInt($.browser.version) <= 7)){try {document.execCommand("BackgroundImageCache", false, true);}catch(e){}} var a = $(’#menu li a’); a.css(’opacity’, 0); //默认的先把a弄成透明的 a.hover( function() { $(this).stop().animate({’opacity’: 1}, "slow"); //鼠标经过的时候 a标签慢速的显示 遮盖都后面的li }, function() { $(this).stop().animate({’opacity’: 0}, "slow"); //鼠标移开 再把a弄成透明的 } ); }); |
好了..这个方法的好处就是js代码相对简单..
但是css的可扩展性很低..= =||