jQuery会弹钢琴的菜单导航

收藏

会前端的都知道animate不支持backgroundPosition，因此今天结合菜单导航介绍一款支持定义背景图片位置的插件：animate-bg.js

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

导航菜单html代码：

<ul id="nav">
    <li><a href="http://www.erdangjiade.com">首页</a></li>
    <li><a href="http://www.erdangjiade.com/js">jQuery特效</a></li>
    <li><a href="http://www.erdangjiade.com/php">PHP</a></li>
    <li><a href="http://www.erdangjiade.com/templates">网站模板</a></li>
</ul>

引入jquery插件和animate背景图片插件animate-bg.js

<script src="js/jquery.min.js" type="text/javascript"></script> 
<script src="js/animate-bg.js" type="text/javascript"></script>

jQuery

导航菜单a标签悬浮和离开触发事件

$(function() {
    $("ul#nav li a").addClass("js");
    $("ul#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);
            }
    );
});