本例主要使用了jQuery的animate自定义动画函数
思路：一个li元素的移动效果，随着鼠标的移动li的left属性发生变化，其背景也就跟着移动
最终实现所要的效果！！
代码如下：
<!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>
<title>简单的背景跟随jQuery导航栏！</title>
<script src=”js/jquery-1.4.4.min.js” type=”text/javascript”></script>
<style type=”text/css”>
.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;
}
</style>
<script type=”text/javascript”>
$(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);
});
});
</script>
</head>
<body>
<div>
<div>
<ul>
<li id=”home”><a href=”#” title=””>Home</a></li>
<li id=”work”><a href=”#” title=””>Work</a></li>
<li id=”study”><a href=”#” title=””>Study</a></li>
<li id=”link”><a href=”#” title=””>Link</a></li>
<li id=”about”><a href=”#” title=””>About</a></li>
<li id=”contact”><a href=”#” title=””>Contact</a></li>
<li id=”yellow”></li>
</ul>
</div>
</div>
</body>
</html>
查看演示
点击下载
苏公网安备32031102020149