已兼容IE6、7、8, Firefox, Chrome,Opera,360浏览器
HTML部分代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="jquery-1.4.1.min.js"></script> <script type="text/javascript" src="nav.js"></script> </head> <body> <div id="main"> <div id="nav"> <ul> <li> <a href="">首页</a> <div class="desc"> Red Hat /root的个人博客 </div> </li> <li> <a href="">个人博客</a> <div class="desc"> Red Hat /root的个人博客 </div> </li> <li> <a href="">论坛</a> <div class="desc"> QQ空间 Qzone 腾讯空间 腾讯QQ空间 QQ农场 QQ牧场 </div> </li> <li> <a href="">日志</a> <div class="desc"> QQ空间(Qzone)是中国最大的社交网络 </div> 2013-07-26 <li> <a href="">心情</a> <div class="desc"> 是QQ用户的网上家园,是腾讯集团的核心平台之一 </div> </li> <li> <a href="">个人记录</a> <div class="desc"> 您可以玩游戏、玩装扮、上传照片、写说说、写日志,黄钻贵族还可以免费换装并拥有多种特权 </div> </li> </ul> </div> </div> </body> </html>
CSS部分代码:
*{ margin: 0; padding: 0; border: 0; } li{ list-style: none; } #nav{ margin: 30px auto; width: 960px; height: 40px; background: black; } #nav ul{ height: 40px; margin-left: 40px; border-left: solid 1px white; } #nav ul li{ float: left; width: 80px; height: 40px; text-align: center; font-family: 微软雅黑; position: relative; } #nav ul li a{ display: block; color: white; font-size: 15px; font-weight: bold; text-decoration: none; line-height: 40px; border-right: solid 1px white; width: 80px; height: 40px; } .desc{ font-size: 12px; width: 79px; color: white; background: black; height: 150px; position: absolute; top: 30px; left: 1px; cursor: pointer; display: none; }
JS部分代码:
$(document).ready(function() { var $time = 200 $top = "12px" $oriTop = "30px"; $("#nav ul li").hover(function() { $(this).find(".desc").stop(true, true).slideDown($time).animate({top : $top}, $time); }, function(){ $(this).find(".desc").stop(true, true).slideUp($time).animate({top : $oriTop}, $time); }) })
下面是自己的一点学习心得:
个人觉得在网页特效方面,其实最重要的还是CSS布局的好坏,它将直接影响你下面JS代码的编写。一个好的CSS布局,有时候只需不多的JS代码就可能完成一个复杂的特效。
最终效果图:
当鼠标移动到导航栏时, 导航栏介绍将呈现流动效果显示。
16:59:42 2013-07-26