js不间断滚动的简单实现

时间:2021-05-26

CSS:

ul, li { margin: 0; padding: 0; } #scrollDiv { width: 300px; height: 25px; line-height: 25px; border-bottom: #4c8cd1 1px solid; overflow: hidden; } #scrollDiv li { height: 25px; padding-left: 10px; }

JS:

<script> function AutoScroll(obj) { $(obj).find("ul:first").animate({ marginTop: "-25px" }, 800, function () { $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this); }); } $(document).ready(function () { setInterval('AutoScroll("#scrollDiv")', 3000) setInterval('AutoScroll("#scrollDiv")', 3000) }); </script>

HTML:

<div id="scrollDiv"> <ul> <li>这是公告标题的第一行</li> <li>这是公告标题的第二行</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> </ul> </div>

以上这篇js不间断滚动的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章