当前位置: 首页 > 编程笔记 >

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

凌照
2023-03-14
本文向大家介绍原生js实现水平方向无缝滚动,包括了原生js实现水平方向无缝滚动的使用技巧和注意事项,需要的朋友参考一下

水平方向无缝滚动

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

 <div id="demo">
    <div id="demoin">
      <div id="demo1">
        <a href="">测试文字1</a>
        <a href="">测试文字2</a>
        <a href="">测试文字3</a>
        <a href="">测试文字4</a>
        <a href="">测试文字5</a>
        <a href="">测试文字7</a>
        <a href="">测试文字8</a>
        <a href="">测试文字9</a>
        <a href="">测试文字10</a>
        <a href="">测试文字11</a>
        <a href="">测试文字12</a>
        <a href="">测试文字13</a>
        <a href="">测试文字14</a>
        <a href="">测试文字15</a>
        <a href="">测试文字16</a>
        <a href="">测试文字17</a>
      </div>
      <div id="demo2"></div>
    </div>
  </div>

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

效果图:

效果就是一直滚动。

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

 类似资料:
  • 本文向大家介绍js实现无缝滚动图,包括了js实现无缝滚动图的使用技巧和注意事项,需要的朋友参考一下 效果如下: 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 本文向大家介绍js实现无缝滚动特效,包括了js实现无缝滚动特效的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家介绍了js实现无缝滚动特效需要做到的功能,以及关键性js代码,分享给大家供大家参考,具体内容如下 运行效果图: 结合下学了的知识,做个模拟的综合性扩展练习~~  大致功能如下: 1、点开html后,图片自动移动展示 2、点击左右方向,可以改变 图片移动的方向(改变left的值,正负

  • 本文向大家介绍js实现无缝滚动图(可控制当前滚动的方向),包括了js实现无缝滚动图(可控制当前滚动的方向)的使用技巧和注意事项,需要的朋友参考一下 这个版本可以控制左右滚动,鼠标点击对应的广告会自动滑动把广告完全展示出来。还实现了记录当前滚动的方向,当鼠标离开,接着继续滚动!!! 效果图: 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐

  • 本文向大家介绍JS平滑无缝滚动效果的实现代码,包括了JS平滑无缝滚动效果的实现代码的使用技巧和注意事项,需要的朋友参考一下 本文我们实现纯JS方式的滚动广告效果。 先show一下成品: 首先是网页样式: 布局如下: 具体的JS实现: 这里要注意的是: scrollLeft代表页面利用滚动条滚动到右侧时,隐藏在滚动条左侧的页面的宽度。 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗

  • 本文向大家介绍原生javascript实现图片无缝滚动效果,包括了原生javascript实现图片无缝滚动效果的使用技巧和注意事项,需要的朋友参考一下 图片水平无缝滚动效果在大量的网站都有应用,特别是一些企业网站在展示产品的时候,因为是动态效果,所以能够给网站增色不少,相比静态图片展示更能够吸引用户的注意力,下面就通过实例代码介绍一下如何实现此效果。 代码如下: 希望对大家学习javascript

  • 本文向大家介绍原生js实现无缝轮播图效果,包括了原生js实现无缝轮播图效果的使用技巧和注意事项,需要的朋友参考一下 话不多说,请看代码 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!