|
猛火网(LieHuo.Net)教程 本文将分步讲授怎样行使JQuery和CSS打造一个炫酷动感菜单。jQuery的"write less, do more"的特征可谓是家喻户晓，纵然没有很富厚JS编程履历的人，也可以通过其提供的API很快学会怎样行使，虽然，假如您履历富厚，我照旧提议您可以领略jQuery各首要函数的实现道理，其他不说了，直接看看怎样用它来实现菜单神奇的结果吧。
演示地点：点我查察
Step1 - HTML布局
看一下菜单的HTML代码，跟泛泛的菜单代码没有什么区别：
<div id="menu" class="menu">
<ul>
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">JavaScript</a></li>
<li><a href="javascript:;">Resources</a></li>
<li><a href="javascript:;">Tutorials</a></li>
<li><a href="javascript:;">About</a></li>
</ul>
</div>
要害在于操作剧本在每个锚点(a元素)中成立几个脱离层，这样就可以在鼠标悬停时别离节制它们发活跃画。为此，我们要在DOM加载完成时辰修改DOM的布局，使得每个锚点代码酿成如下：
<a href="javascript:;">
<span class="out">Home</span>
<span class="bg"></span>
<span class="over">Home</span>
</a>
原先的每个锚点中的内容会被附加到两个span元素（.out和.over）内里，其它一个span元素（.bg）为配景图片层。
至于怎样修改DOM布局，JS代码将在Step3中讲授。 （编辑：河北网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
