Simple implementation of js Continuous Rolling and js Continuous Rolling
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 Continuous Rolling is all the content shared by Alibaba Cloud xiaobian. I hope to give you a reference and support for the help house.