Jquery實現文字向上逐條滾動

本文轉載自查看原文 2016-08-03 18:52 1825 滾動/ Jquery系列/ Js and css系列/ 文字

直接上代碼：

<!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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery實現文字向上滾動 JS新聞公告文字逐條向上翻滾代碼 JQ文字向上滾動 vue文字向上滾動 jquery實現文字上下滾動效果 jQuery 文字向上輪播 jquery 實現文字輪播滾動原生js實現文字無縫向上滾動效果 JS實現文字向上無縫滾動輪播 jQuery實現消息列表循環垂直向上滾動