<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代碼編寫。
新聞熱點
疑難解答
