jQuery实现数据循环滚动

用jQuery简单实现了数据循环滚动效果，鼠标移上去滚动停止，鼠标移开继续滚动。如果承装数据的父盒子的高度大于数据的高度，则不滚动显示。效果图如下。前面要引入jquery。

css如下：

<style>
    .bigbox {
        border: 1px solid #E9F2FA;
        width: 500px;
        background-color: #101129;
    }
    .mybox {
        width: 500px;
        line-height: 28px;
        font-size: 16px;
        height: 340px;
        overflow: hidden;
        font-size: 12px;
        box-shadow: 2px #68D8FE;
    }
    .head {
        width: 500px;
        display: flex;
        justify-content: space-between;
        height: 50px;
        background-color: #27283E;
        color: #68D8FE;
        font-size: 14px;
    }
    .head p {
        width: 130px;
        text-align: center;
        height: 20px;
        line-height: 20px;
    }
    div li {
        list-style: none;
        display: flex;
        justify-content: space-between;
        color: #61A8FF;
    }
    div li:hover {
        cursor: pointer;
        color: #3EDEF9;
        background-color: #27283E;
    }
    div li p {
        width: 130px;
        text-align: center;
        height: 14px;
        line-height: 14px;
    }
    .aa {
        color: #EFEA3B;
        width: 1px;
        height: 1px;
        position: absolute;
        top: 5px;
        left: 2px;
    }
</style>

html：

 <div class="bigbox">
        <div class="head">
            <p>开发项目</p>
            <p>房屋地址</p>
            <p>预计税费</p>
            <p>纳税人员</p>
        </div>
        <div class="mybox">
            <div class="add" style="margin-top: -1px;">
                //ajax后台取出数据循环渲染
            </div>
        </div>
    </div>

js：
主要的核心思想是，当margin-top的绝对值大于等于line-height时，将margin-top置0，然后截取此条数据拼接到末尾，以此达到循环滚动的效果。

<script>
        (function ($) {
            $.fn.myscroll = function (detail) {
                var rule = detail;
                var rowheight = rule["rowHeight"]
                var speed = rule["speed"]
                var that = $(this);//mybox
                var time = setInterval(function () {
                    if (that.find("div").height() <= that.height()) {
                        clearInterval(time);
                    } else {
                        marquee(that, rowheight);
                    }
                }, speed);

                that.hover(function () {
                    clearInterval(time);
                    $(this).find('div').each(function (i) {
                        $(this).click(function () {
                            //这里处理跳转事件
                            var jumpid = $(this).attr('id');//data的id
                            window.location.href = 'index.html';
                        })
                    })
                }, function () {
                    time = setInterval(function () {
                        if (that.find("div").height() <= that.height()) {
                            clearInterval(time);
                        } else {
                            marquee(that, rowheight);
                        }
                    }, speed);
                });
                function marquee(obj, rowheight) {
                    obj.find("div").animate({ marginTop: '-=1' }, 0, function () {
                        var s = Math.abs(parseInt($(this).css("margin-top")));
                        if (s >= rowheight) {
                            //这里this是ul，截取第一条拼接在最后一条 达到循环播放的效果
                            $(this).find("li").slice(0, 1).appendTo($(this));
                            $(this).css("margin-top", 0);
                        }
                    });
                }
            }
        })(jQuery);

        $(document).ready(function () {
            $.ajax({
                type: "get",
                contentType: "application/json;charset=UTF-8",
                url: "http://192.168.11.104:8080/project/list",
                success: function (result) {
                    for (let i = 0; i < result.data.length; i++) {
                        $('.add').append("<li id='" + result.data[i].id + "'><p>" + result.data[i].project + "</p><p>" + result.data[i].address + "</p><p>" + result.data[i].money + "</p><p>" + result.data[i].person + "</p></li>")
                    }
                    $("div.mybox").myscroll({
                        speed: 80, 
                        rowHeight: 38 
                    });
                },
            });
        })
    </script>