JavaScript Implementation of Seamless Vertical Scrolling of Text

Static effect as follows: (Dynamic effect can be seen by copying and pasting the following code below)

The code is as follows:

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></</script>
 <style type="text/css">
 *{
 padding: 0;
 margin:0;
 })
 ul,li{
 list-style: none
 })
 .scroll {
 height:90px;
 width:100%;
 max-width:640px;
 background-color:#000;
 overflow:hidden;
 color: #fff;
 })
 .scroll ul {
 width:100%;
 position:absolute;
 left:0;
 top:0;
 })
 .scroll span {
 font-size:20px;
 height:30px;
 /*color:#D83E21;
 */
 })
 .scroll li {
 height:30px;
 line-height:30px;
 })
 </style>
</head>
<body>
 <div id="scroll" class="scroll clearfix">
  <ul>
  <li>444444444444444444444444</li>
  <li>11111111111111111111111111</li>
  <li>11111111111111111111111111</li>
  <li>11111111111111111111111111</li>
  <li>11111111111111111111111111</li>
  <li>33333333333333333333333333</li>
  <li>11111111111111111111111111</li>
  <li>11111111111111111111111111</li>
  <li>11111111111111111111111111</li>
  <li>11111111111111111111111111</li>
  <li>11111111111111111111111111</li>
  <li>2222222222222</li>
  </ul>
 </div>
</body>
</html>
<script type="text/javascript"> 
 //Scroll
 var scrollIndex=0;
 var Timer=null;
 function scroll_f(){
  clearInterval(Timer);
  var ul=$("#scroll ul");
  var li=ul.children("li");
  var h=li.height();
  var index=0;
  ul.css("height",h*li.length*2
  ul.html(ul.html()+ul.html());    
     function run()
         {
         if(scrollIndex>=li.length){
          ul.css({top:0});
          scrollIndex=1;
          ul.animate({top:-scrollIndex*h},200);
         }) 
         else{
          scrollIndex++; 
          ul.animate({top:-scrollIndex*h},200);
         })
         })
     Timer=setInterval(run,1500); 
 })
 $(function(){
  scroll_f();
 >}
</</script>

That's all for this article. I hope the content of this article can bring some help to everyone's learning or work, and I also hope to support the Shouting Tutorial more!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been edited by humans, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial