Native js achieves seamless Horizontal Rolling and js horizontal seamless

Native js achieves seamless Horizontal Rolling and js horizontal seamless

Seamless horizontal scrolling

Supports image and text scrolling.
Principle:A large box contains two boxes, which are implemented by setting the offsetWidth and scrollLeft relationships. The timer function setInterval is also used. When the finger moves up, the scroll is defined and the scrolling continues. Compatible with various browsers.
HTML code

<Div id = "demo"> <div id = "demoin"> <div id = "demo1"> <a href = ""> test text 1 </a> 
CSS code
# Demo {width: 1000px; height: 30px; overflow: hidden; line-height: 30px; font-size: 13px; font-family: ' '; background: # ddd url (images/notice.png) no-repeat 25px center; color: # 0C77CF; font-weight: bold; margin: 0 auto ;}# demoin {width: 900px; height: 30px; margin: 0 auto; white-space: nowrap; overflow: hidden;} # demo # demo1, # demo # demo2 {display: inline}
Javascript code
 window.onload = function(){    scrollLeft();  };  function scrollLeft(){    var speed = 20;    var tab = document.getElementById('demoin');    var tab1 = document.getElementById('demo1');    var tab2 = document.getElementById('demo2');    tab2.innerHTML = tab1.innerHTML;    function Marquee(){      if(tab2.offsetWidth - tab.scrollLeft <=0) {            tab.scrollLeft = 0;      }else{        tab.scrollLeft ++;      }    }    var timer = setInterval(Marquee,speed);    tab.onmouseover = function(){      clearInterval(timer);    };    tab.onmouseout = function(){      timer = setInterval(Marquee,speed);    }  }
:


The effect is always rolling.
Note: The content width must be greater than the container width, otherwise it cannot be rolled. The test text is generally obtained using the ajax background.