标题可能很多人看到这个效果不是很清楚，下面简要这种效果：
看到非常多站点上的导航栏以下有一个小的色块。一開始小色块是处在第一个标题以下的。当鼠标移动到还有一个标题时，这个小色块就会悠悠地跑到相应的标题以下。
也能够鼠标放上去不光是色块移动，颜色也对应的改变：
这里截图仅仅能看到色块是移动了，但显示不出色块是从Home以下平滑移动到Product以下的。反正就是这个意思了。
大家看我上面的解释就知道了，不行看以下代码或者把代码拷贝执行一下就看到效果了
这个特效非常好玩。正好朋友写了这方面的特效代码，我拿过来看了下，这才发现事实上非常easy。就是几个jquery封装好的方法拼接一下就ok了。但自己写还是非常犯难。事实上主要还是想法和思路的问题。
以下贴出代码：
注意：
1.用到了jquery库，大家假设有兴趣复制粘贴过去自己调试一下，请自行导入相应的jquery库就可以
2.用了parent()函数
3.用了position()函数
4.用了stop()函数
(这个stop函数能够重载。能够是一个參数，表示无条件的停止当前的一切动画。一个是两个參数，表示是否让当前动画运行完毕后再停止动画)
5.用了animate()函数
(这个animate非经常常使用，建议大家去w3cshool上看一下)
6.鼠标放上去和移开的mouseenter和mouseleave函数
<!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>js滑动导航</title>
<style>
body,html,div{margin:0;padding:0;font-weight:bold;font-family:Verdana, Geneva, sans-serif; font-style:italic;}
.menu{
margin:0 auto;
900px;
position: relative;
background-color:#000;
border:0px solid #000;
}
.menu ul{ border:0px solid #F00; height:60px; padding:0;}
.menu li{
float: left;
80px;
list-style: none;
padding: 0 20px;
text-align: center;
height: 60px;
line-height: 60px;;
border:0px solid #FFF;}
.menu li a{text-decoration:none; color:#CCC;}
.menu a:hover,.menu li:hover a{
color: #0CF;
}
.back{
height: 3px;
background-color: #0CF;
position: absolute;
bottom: 0px;
left: 0px;
120px;
}
</style>
<script src="Js/jquery1.9.1.js" language="javascript" type="text/javascript"></script>
<script>
$(document).ready(function(e) {
$(".menu ul li a").mouseenter(function(){
var parent=$(this).parent();
left=parent.position().left;
$(".back").stop(true,true).animate({left:left,"120px"}, "fast");
})
$(".menu ul").mouseleave(function(){
$(".back").stop(true,true).animate({left:"0px","120px"},"fast");
})
});
</script>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Picture</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="back"></div>
</div>
</body>
</html>
假设须要鼠标放上去色块的颜色也改变，则仅仅要把<script>里面的内容改成例如以下就可以：
<script>
$(document).ready(function(e) {
$(".menu ul li a").mouseenter(function(){
var parent=$(this).parent();
left=parent.position().left;
$(".back").stop(true,true).animate({left:left,"120px"}, "fast");
$(".back").css("background-color","#F00");//鼠标放上去色块颜色改变
})
$(".menu ul").mouseleave(function(){
$(".back").stop(true,true).animate({left:"0px","120px"},"fast");
$(".back").css("background-color","#0CF");//鼠标移开色块颜色恢复初始值
})
});
</script>
版权声明：本文博主原创文章。博客，未经同意不得转载。