首页 > Web开发 > 详细

jquery列表动画

时间:2015-12-16 15:21:20      阅读:160      评论:0      收藏:0      [点我收藏+]
    //新闻导航
    (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返回初始位置

jquery列表动画

原文:http://www.cnblogs.com/bestsamcn/p/5051147.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!