//新闻导航
(function (){ //获取分类名称
var _text = $('.news .news-wrapper .news-left .news-left-title .position a').eq(1).text();
_text = $.trim(_text); var _a = $('.news .news-wrapper .news-right .news-nav .news-nav-list a')
var _height = _a.height() +1;
var _line = $('.news .news-wrapper .news-right .news-nav .news-nav-list .line');
var _top = _line.css('top'); //动画
var _move = function(num){
_line.stop(true,false).animate({top: (num-1) * _height},100);
_a.eq(num-1).css('color','#897544').siblings().css('color','#333') } //判断当前分类
_a.each(function(){
$text = $(this).text();
$text = $.trim($text);
if($text == _text){
$index = $(this).index();
_move($index); }
}) //鼠标进入
$('.news .news-wrapper .news-right .news-nav .news-nav-list a').mouseover(function() {
$_index = $(this).index();
_a.eq($index-1).css('color','#897544').siblings().css('color','#333')
_move($_index);
}); //鼠标离开
$('.news .news-wrapper .news-right .news-nav .news-nav-list').mouseout(function() {
_move($index);
return false
});
})();
<div class="news-nav-list">
<i class="line"></i>
<a href="">财经资讯</a>
<a href="">原油资讯</a>
<a href="">机构观点</a>
<a href="">交易策略</a>
<!-- <a href="">我要开户</a> -->
<a href="">今日数据</a>
<a href="">每日油评</a>
<a href="">软件下载</a>
<a href="" class="no-border">关于我们</a>
</div>
根据分类初始化导航,当鼠标移入导航时根据导航的当前的下标,确定line的位置,当鼠标移开导航的时候,line返回初始位置