LiuCabbage-jquery myscroll文字上下无缝滚动插件简单使用

06 08月 2020

效果图

undefined

scroll_table.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格滚动</title>
        <script src="jquery.min.1.8.3.js" type="text/javascript" charset="utf-8"></script>
        <script src="scroll_table.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                function getData() {
                    var html = '';
                    for (var i = 0; i < 100; i++) {
                        var value = i + 1;
                        html += '<tr>' +
                            '<td>' + value + '</td>' +
                            '<td>' + value + '</td>' +
                            '<td>' + value + '</td>' +
                            '<td>' + value + '</td>' +
                            '</tr>';
                    }
                    $('#tbList').html(html);
                }
                
                getData();
                setTimeout(function() {
                    $('.s_div').myScroll({
                        speed: 60,
                        rowHeight: 40
                    });
                }, 500);
            });
        </script>
        <style type="text/css">
            table{
                width: 100%;
            }
            #tbList tr{
                height: 40px;    /*不给固定高度，会抽搐*/
            }
            #tbList tr td{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="main_table" style="width: 600px; height: 400px; margin: 0 auto; border: 1px solid #eee;">
            <table class="table-info-header">
                <colgroup>
                    <col width="25%" />
                    <col width="25%" />
                    <col width="25%" />
                    <col width="25%" />
                </colgroup>
                <thead>
                    <tr>
                        <th>
                            1
                        </th>
                        <th>
                            2
                        </th>
                        <th>
                            3
                        </th>
                        <th>
                            4
                        </th>
                    </tr>
                </thead>
            </table>
            <div class="s_div" style="height:320px;overflow: hidden;">
                <table class="table-info">
                    <colgroup>
                        <col width="25%" />
                        <col width="25%" />
                        <col width="25%" />
                        <col width="25%" />
                    </colgroup>
                    <tbody id="tbList">
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>

scroll_table.js

// JavaScript Document
(function($) {
    $.fn.myScroll = function(options) {
        //默认配置
        var defaults = {
            speed: 40, //滚动速度,值越大速度越慢
            rowHeight: 24 //每行的高度
        };

        var opts = $.extend({}, defaults, options),
            intId = [];

        function marquee(obj, step) {

            obj.find("table").animate({
                marginTop: '-=1'
            }, 0, function() {
                var s = Math.abs(parseInt($(this).css("margin-top")));
                if (s >= step) {
                    $(this).find("tr").slice(0, 1).appendTo($(this));
                    $(this).css("margin-top", 0);
                }
            });
        }

        this.each(function(i) {
            var sh = opts["rowHeight"],
                speed = opts["speed"],
                _this = $(this);
            intId[i] = setInterval(function() {
                if (_this.find("table").height() <= _this.height()) {
                    clearInterval(intId[i]);
                } else {
                    marquee(_this, sh);
                }
            }, speed);

            _this.hover(function() {
                clearInterval(intId[i]);
            }, function() {
                intId[i] = setInterval(function() {
                    if (_this.find("table").height() <= _this.height()) {
                        clearInterval(intId[i]);
                    } else {
                        marquee(_this, sh);
                    }
                }, speed);
            });

        });

    }

})(jQuery);

scroll_ul.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表滚动</title>
        <script src="jquery.min.1.8.3.js" type="text/javascript" charset="utf-8"></script>
        <script src="scroll_ul.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                function getData() {
                    var html = '';
                    for (var i = 0; i < 100; i++) {
                        var value = i + 1;
                        html += '<li>' + value + '</li>';
                    }
                    $('#tbList').html(html);
                }

                getData();
                setTimeout(function() {
                    $('.s_div').myScroll({
                        speed: 60,
                        rowHeight: 40
                    });
                }, 500);
            });
        </script>
        <style type="text/css">
            .list {
                width: 270px;
                border: 1px solid #eee;
                margin: 30px auto;
            }

            .s_div {
                height: 400px;
                overflow: hidden;
            }
            
            #tbList li{
                height: 40px;    /*不给固定高度，会抽搐*/
            }
        </style>
    </head>
    <body>
        <div class="list">
            <h2>列表滚动</h2>
            <div class="s_div">
                <ul id="tbList"></ul>
            </div>
        </div>
    </body>
</html>

scroll_ul.js

// JavaScript Document
(function($) {
    $.fn.myScroll = function(options) {
        //默认配置
        var defaults = {
            speed: 40, //滚动速度,值越大速度越慢
            rowHeight: 24 //每行的高度
        };

        var opts = $.extend({}, defaults, options),
            intId = [];

        function marquee(obj, step) {

            obj.find("ul").animate({
                marginTop: '-=1'
            }, 0, function() {
                var s = Math.abs(parseInt($(this).css("margin-top")));
                if (s >= step) {
                    $(this).find("li").slice(0, 1).appendTo($(this));
                    $(this).css("margin-top", 0);
                }
            });
        }

        this.each(function(i) {
            var sh = opts["rowHeight"],
                speed = opts["speed"],
                _this = $(this);
            intId[i] = setInterval(function() {
                if (_this.find("ul").height() <= _this.height()) {
                    clearInterval(intId[i]);
                } else {
                    marquee(_this, sh);
                }
            }, speed);

            _this.hover(function() {
                clearInterval(intId[i]);
            }, function() {
                intId[i] = setInterval(function() {
                    if (_this.find("ul").height() <= _this.height()) {
                        clearInterval(intId[i]);
                    } else {
                        marquee(_this, sh);
                    }
                }, speed);
            });

        });

    }

})(jQuery);

非特殊说明，本文版权归 LiuCabbage 所有，转载请注明出处.

本文标题： jquery myscroll文字上下无缝滚动插件简单使用

本文网址： http://www.baocaige.top/Article/Detail/14

延伸阅读

发表评论