Jquery实现文字向上逐条滚动

时间：2023-03-09 09:44:18
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>

相关文章