一个很酷的jQuery动画菜单
使用方法
引入文件
<script src="js/jquery.min.js"></script> <script src="js/animate-bg.js"></script>
除了 jQuery 文件外,还需要引入 animate-bg.js 文件,这是一个让背景有动画效果的插件。
HTML
<div id="container"> <ul id="nav"> <li><a href="#">首 页</a></li> <li><a href="#">关 于</a></li> <li><a href="#">链 接</a></li> <li><a href="#">联 系</a></li> </ul> </div>
CSS
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form { margin: 0; padding: 0; border: 0; } body { background: #f5f0e0 url(images/noise.png); } #container { height: 800px; background: url(images/bg.jpg) center top no-repeat; } ul#nav { width: 700px; margin: 0 auto; text-align: center; overflow: hidden; } ul#nav li { float: left; list-style: none; } ul#nav li a { display: block; width: 97px; height: 77px; padding: 72px 0 0 0; margin: 0 32px 0 32px; font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase; color: #9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none; background: url(images/label.png) 0 -149px no-repeat; } ul#nav li a:hover { background: url(images/label.png) 0 0 no-repeat; color: #eee9d9; text-shadow: 0 2px 3px #4c2222; } ul#nav li a.js:hover { background: url(images/label.png) 0 -149px no-repeat; }
JavaScript
$(function() { $("#nav li a").addClass("js"); $("#nav li a").hover(function () { $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200); $(this).animate({backgroundPosition:"(0 -5px)"}, 150); }, function () { $(this).animate({backgroundPosition:"(0 -149px)"}, 200); }); });
标签:jQuery