网页菜单动画例子
? ? 碼碼：
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style type="text/css"> <!-- body {font-family: "宋體";font-size: 14px;margin:0px; } ul {list-style:none;} #links ul li {margin-bottom: 6px; } --> </style> <script type="text/javascript" src="jslib/jquery-1.6.js"></script> <script type="text/javascript">$(document).ready(function() {$('a.link').hover(function() {$(this).animate({ paddingLeft: '20px' },400);}, function() {$(this).animate({ paddingLeft: 0 }, 400);});}); </script> </head> <body><ul><li><a href="#" class="link">首頁</a></li><p></p><li><a href="#" class="link">菜單一</a></li><p></p><li><a href="#" class="link">菜單二</a></li><p></p><li><a href="#" class="link">菜單三</a></li><p></p><li><a href="#" class="link">菜單四</a></li><p></p><li><a href="#" class="link">菜單五</a></li><p></p><li><a href="#" class="link">菜單六</a></li> </ul> </body> </html>
圖圖：
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?
代碼說明：
設置html體的字體為宋體，字體尺寸14px，四個外邊距都為0；
ul列表風格-無；
每個列表項底部外邊距為6；
a鏈接鼠標懸停函數：
? ? 動畫：左縮進20px，持續400ms;
? ? 動畫，復原，持續400ms;
html體：
ul中包含li項目
li中包含a鏈接
?
?
總結
- 上一篇： Java SSH 集成框架开发中的错误解
- 下一篇： jQuery时间轴特效