原生js实现水平方向无缝滚动

水平方向无缝滚动

路桥网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作，到程序开发，运营维护。创新互联建站成立与2013年到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。

滚动支持图片，文字
原理：一个大的盒子中放置两个盒子，通过设置offsetWidth，scrollLeft的关系来实现，而且还用到定时器函数setInterval，当手指移动上去定义滚动，离开继续滚动。兼容各大浏览器。
HTML代码

 
    
      
        测试文字1
        测试文字2
        测试文字3
        测试文字4
        测试文字5
        测试文字7
        测试文字8
        测试文字9
        测试文字10
        测试文字11
        测试文字12
        测试文字13
        测试文字14
        测试文字15
        测试文字16
        测试文字17

CSS代码

#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代码

 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);
    }
  }

效果图：

原生js实现水平方向无缝滚动

效果就是一直滚动。

注意：内容的宽度必须大于容器的宽度，否则无法滚动，测试文字一般是使用ajax后台获取。

本文标题：原生js实现水平方向无缝滚动
网页URL：http://dzwzjz.com/article/jhphce.html

大橙子网站建设，新征程启航

原生js实现水平方向无缝滚动

其他资讯