Simple implementation of js uninterrupted scrolling

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>This is the first line of the announcement title</li> <li>This is the second line of the announcement title</li> <li>This is the third line of the announcement title</li> <li>This is the fourth line of the announcement title</li> <li>This is the fifth line of the announcement title</li> <li>This is the sixth line of the announcement title</li> <li>This is the seventh line of the announcement title</li> <li>This is the eighth line of the announcement title</li> </ul> </div>

The simple implementation of the above js uninterrupted scrolling is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.