排行榜 文字向上滚动效果

<!-- 文字轮播效果 start-->

<script>

(function($){

    $.fn.FontScroll = function(options){

        var d = {time: 3000,s: 'fontColor',ulClassName:'line'}

        var o = $.extend(d,options); //d目标参数 options原参数 对原对象中的每个属性进行判断，如果是，那么将他拷贝到目标的对象上去。

        this.children('ul').addClass(d.ulClassName);

        var _con = $("."+d.ulClassName).eq(0);//UL

        var _conH = _con.height(); //滚动总高度

        var _conChildH = _con.children().eq(0).height();//一次滚动高度 li的高度

        var _temp = _conChildH;  //临时变量

        var _time = d.time;  //滚动时间间隔

        _con.clone().insertAfter(_con);

        function _clone(){

            $("."+d.ulClassName).eq(1).remove();

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

            $("."+d.ulClassName).eq(1).attr("style","");

        }

 

        var _p = this.find('li');

        var allNum = _p.length;//li的个数

        var timeID = setInterval(Up,_time);

        // this.hover(function(){clearInterval(timeID)},function(){timeID = setInterval(Up,_time);}); 当鼠标停留时 mouseover不滚动 mouseout继续滚动

        //jQuery 1.8 版本后该方法触发 mouseover 和 mouseout 事件。

        function Up(){

            _con.animate({marginTop: '-'+_conChildH});//样式控制                              

            if(_conH == _conChildH){

                _con.animate({marginTop: '-'+_conChildH},"normal",over);

 

                console.log("come here!");

            } else {

                _conChildH += _temp;

            }

        }

        function over(){

            _clone();//以防信息更新后克隆的ul 还是之前的 需要重新克隆一次

            _con.attr("style",'margin-top:0');

            _conChildH = _temp;               

        }

    }

})(jQuery);

setTimeout(function(){

    $('#section-best-list-div').FontScroll({time: 2000,num: 1,ulClassName:'best-persondemo'});

},5000);

setTimeout(function(){

    $('#person-best-list-div').FontScroll({time: 2000,num: 1,ulClassName:'best-sectiondemo'});

},5000);

 

 

</script>

<!-- 文字轮播效果 end -->

转载于:https://www.cnblogs.com/lzs-888/p/5386554.html