jq下划线跟随导航的代码及知识点总结
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq下划线导航</title>
<script type="text/javascript" src="js/jq_3.3.1_mi.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
ul {list-style: none;z-index:20;font-size: 14px;}
.menu{width: 600px;height: 40px;margin: 20px auto; text-align: center;background: #BA3032;box-shadow: 0 2px 10px #666;border-radius: 3px;position: relative;}
li{float: left;width: 120px;height: 40px;line-height: 40px;color: #fff;font-family: '微软雅黑';list-style: none;}
a:link,a:visited,a:hover{color: #fff; text-decoration: none;width:120px;display: block;}
.line{width: 120px;height: 2px;background: #fff;position: absolute;bottom: 0px;z-index: 10px;}
</style>
<script type="text/javascript">
$(function(){
$('a').hover(//获取a标签，鼠标指针经过时执行以下函数
function(){
$x=parseInt($(this).attr('name'))*120//获取当前a标签的name的属性
$('.line').stop().animate({left:$x+'px'},300)
},
function(){
$('.line').stop().animate({left:'0px'},300)//鼠标的初始化，当鼠标离开a的时候，下边的线回到初始位置
}
)
})
</script>
</head>
<body>
<div>
<ul>
<li ><a href="#" name="0">首页</a></li>
<li ><a href="#" name="1">学院简介</a></li>
<li ><a href="#" name="2">部门概况</a></li>
<li ><a href="#" name="3">专业设置</a></li>
<li ><a href="#" name="4" >联系我们</a></li>
</ul>
<div></div>
</div>
</body>
</html>
知识点总结：
用到两个主要的函数parseInt() 和animate()
一、parseInt() 函数的作用：可解析一个字符串，并返回一个整数。parseInt的返回值只有两种可能，不是一个十进制整数，就是NaN，本例中，用parseInt函数获取a标签的name属性
二、animate()函数的作用：animate()方法执行CSS属性集的自定义动画，该方法会将一个属性在指定或者默认的时间内从一个属性值变化到另一个属性值，由于属性值是逐渐变化的，所以就形成了所谓的动画效果。
animate()的语法：$(selector).animate(styles,speed,easing,callback)
1、styles用来设置对象属性值的目标值，即需要将属性值变成什么状态或者大小。animate可以操作的属性很多，但是它不能操作颜色，如对象背景颜色，字体颜色等，如果想要操作颜色，需要导入官方提供的js文件才可以。
2、speed就是速度，就是对象属性值从当前的状态转换到你设置的另一个状态的变化时间
3、easing是描述这个动画设一个怎样的运行过程，’linear’ 就是匀速的意思，即对象属性值从当前值变化到另一个值在固定的时间内是匀速变化的，而默认’swing’这个参数表示曲线形的运动模式，刚开始会慢慢运动，然后加速，最后减速。
4、callback是一个回调函数表示在动画执行完毕以后去调用的一个函数，用了这个回调函数，我们可以实现让动画往复运行，即在回调函数里面再把对象属性值设置为初始状态