<html>
<head> <meta charset="utf-8"> <title>JQ伸缩变动导航栏效果</title> <style> *{margin: 0;padding: 0;text-decoration: none;list-style: none;} nav{width: 100%;height: 40px;border-bottom: 10px solid #FC751B;} nav ul{margin:20px 0 0 20px;width: 800px;} nav ul li{float: left;height: 40px;margin-right: 5px;background: #EAEAEA;line-height: 30px;} nav ul li a{display: block;width: 120px;height: 30px;color:#000;text-align: center;padding:5px 0} nav ul li a:hover{background: #FC751B;color:#fff;} </style> <script type="text/javascript" src="../JQuery/jquery.min.js"></script> <script> $(function(){ $('a').hover( function(){ $(this).animate({"width":"160px"},300); }, function(){ $(this).animate({"width":"120px"},300); } ) }) </script> </head> <body> <div class="box"> <nav> <ul> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </div> </body></html>
效果是和JS代码写得差不多，但是更加流畅自然。这个案例建议是使用JQ代码编写。
新闻热点
疑难解答
