先来看下效果

    <div class="tbody-box">
	    <div class="tbody">
		    <div id="swyh-bar"&gt;
			    <li class="list"&gt;
				    <div class="td"&gt;123</div&gt;
				    <div class="td"&gt;456</div&gt;
				    <div class="td"&gt;789</div>
				    <div class="td">$111 }</div>
			    </li>
			    <li class="list">
				    <div class="td">123</div>
				    <div class="td">456</div>
				    <div class="td">789</div>
				    <div class="td">$111 }</div>
			    </li>
			    <li class="list">
				    <div class="td">123</div>
				    <div class="td">456</div>
				    <div class="td">789</div>
				    <div class="td">$111 }</div>
			    </li>
			    <li class="list">
				    <div class="td">123</div>
				    <div class="td">456</div>
				    <div class="td">789</div>
				    <div class="td">$111 }</div>
			    </li>
			    <li class="list">
				    <div class="td">123</div>
				    <div class="td">456</div>
				    <div class="td">789</div>
				    <div class="td">$111 }</div>
			    </li>
			    <li class="list">
				    <div class="td">123</div>
				    <div class="td">456</div>
				    <div class="td">789</div>
				    <div class="td">$111 }</div>
			    </li>
	        </div>
	    </div>
    </div>

    .tbody-box {
        position: relative;
	    overflow: hidden;
	    height: 208px;
    }

    .list {
	    display: flex;
	    align-items: center;
	    height: 42px;
	    box-sizing: border-box;
    }

    .tbody {
	    position: relative;
	    top: 0;
    }

    .tbody .td {
	    font-size: 14px;
	    font-family: PingFangSC-Medium, PingFang SC;
	    font-weight: 500;
	    color: red;
	    line-height: 22px;
	    margin: 0 50px;
    }

    function autoScroll(obj) {
		var tableUl = $(obj);
		var first = tableUl.find("li:first");
		var height = first.height();
		first.animate(
			{
				height: 0,
			},
			500,
			function () {
				first.css("height", height).appendTo(tableUl);
			}
		);
	}

	function autoScroll1() {
		if (time) clearInterval(time)
		time = setInterval(()=> {
			autoScroll("#swyh-bar");
		}, 2000);
	}

原文地址:https://blog.csdn.net/weixin_46465687/article/details/125927871

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_16183.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注