jQuery学习（三）实例–jQuery背景跟随移动导航（详解）
本例主要使用了jQuery的animate自定义动画函数
**思路：**一个li元素的移动效果，随着鼠标的移动li的left属性发生变化，其背景也就跟着移动
最终实现所要的效果！！
代码如下：
简单的背景跟随jQuery导航栏！
.wrap
{
background:#000;
height:100px;
width:auto;
}
.menu
{
margin:40px auto;
width:600px;
background:#000;
border-top:2px solid #FFF;
border-bottom:2px solid #FFF;
}
.menu ul
{
background:#FFF;
position:relative;
z-index:99;
}
.menu ul li
{
float:left;
margin-left:10px;
margin-right:10px;
width:60px;
height:30px;
line-height:30px;
position:relative;
z-index:99;
}
.menu ul li a
{
color:#fff;
}
#yellow
{
background:Red;
position:absolute;
top:0;
left:-494px;
z-index:98;
display:inline;
}
$(document).ready(function(){
$(“#home”).mouseover(function(){
$(“#yellow”).animate({left:”-494px”},100);
});
$(“#work”).mouseover(function(){
$(“#yellow”).animate({left:”-413px”},100);
});
$(“#study”).mouseover(function(){
$(“#yellow”).animate({left:”-332px”},100);
});
$(“#link”).mouseover(function(){
$(“#yellow”).animate({left:”-251px”},100);
});
$(“#about”).mouseover(function(){
$(“#yellow”).animate({left:”-170px”},100);
});
$(“#contact”).mouseover(function(){
$(“#yellow”).animate({left:”-89px”},100);
});
});
Home
Work
Study
Link
About
Contact
查看演示
点击下载
