Jquery实现文字向上逐条滚动

直接上代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现文字逐条向上滚动特效</title>
<style>
*{ margin:0; padding:0; list-style:none;}
#FontScroll{width:100%;height:120px;line-height:30px;border:1px solid green;overflow:Hidden;padding:5px 0;margin:0px auto;}
#FontScroll .line{text-align:center;width:100%;}
#FontScroll .fontColor a{color:red;}
</style>
</head>
<body>

<!-- 代码部分 begin -->
<div id="FontScroll">
    <ul>
        <li><a href="http://www.lanrenzhijia.com">懒人之家</a></li>
        <li><a href='http://www.lanrenzhijia.com/flash/' >Flash素材</a></li>
        <li><a href='http://www.lanrenzhijia.com/nav/' >菜单导航</a></li>
        <li><a href='http://www.lanrenzhijia.com/time/' >时间日期</a></li>
        <li><a href='http://www.lanrenzhijia.com/banner/' >焦点图</a></li>

    </ul>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
(function($){
    $.fn.FontScroll = function(options){
        var d = {time: 3000,s: 'fontColor',num: 1}
        var o = $.extend(d,options);
        

        this.children('ul').addClass('line');
        var _con = $('.line').eq(0);
        var _conH = _con.height(); //滚动总高度
        var _conChildH = _con.children().eq(0).height();//一次滚动高度
        var _temp = _conChildH;  //临时变量
        var _time = d.time;  //滚动间隔
        var _s = d.s;  //滚动间隔


        _con.clone().insertAfter(_con);//初始化克隆

        //样式控制
        var num = d.num;
        var _p = this.find('li');
        var allNum = _p.length;

        _p.eq(num).addClass(_s);


        var timeID = setInterval(Up,_time);
        this.hover(function(){clearInterval(timeID)},function(){timeID = setInterval(Up,_time);});

        function Up(){
            _con.animate({marginTop: '-'+_conChildH});
            //样式控制
            _p.removeClass(_s);
            num += 1;
            _p.eq(num).addClass(_s);
            
            if(_conH == _conChildH){
                _con.animate({marginTop: '-'+_conChildH},"normal",over);
            } else {
                _conChildH += _temp;
            }
        }
        function over(){
            _con.attr("style",'margin-top:0');
            _conChildH = _temp;
            num = 1;
            _p.removeClass(_s);
            _p.eq(num).addClass(_s);
        }
    }
})(jQuery);

$('#FontScroll').FontScroll({time: 2000,num: 1});

</script>
<!-- 代码部分 end -->


</body>
</html>
View Code

 

posted @ 2016-08-03 18:52  【云】风过无痕  阅读(2144)  评论(0)  编辑  收藏  举报