简单实现js间歇或无缝滚动效果

前端技术 2023/09/09 JavaScript

间歇、无缝滚动效果（用gif录制的效果不是很好，有兴趣的可以down代码），具体内容如下

代码：

<!DOCTYPE html>
<html lang=\"en\">
<head>
 <meta charset=\"UTF-8\">
 <title>无缝滚动</title>
 <style>
  *{margin:0;padding:0;}
  .box{width: 500px;height: 400px;margin:40px auto;background: #ccc;overflow: hidden;}
  .block{position: relative;width: 500px;height: 400px;overflow: hidden;}
  .item{height: 40px;background: red;color: #fff;line-height: 40px;text-align: center;}
  .item:nth-child(2n){background: #000}
 </style>
 <script>
  var scrollUp=(function(){
   return function(json){
    var objScroll = document.getElementById(json.id);
    objScroll.scrollTop = 0;
    objScroll.innerHTML += objScroll.innerHTML;
    if(json.on){
     function scrollIng(){
      if(objScroll.scrollTop >= objScroll.scrollHeight) {
       objScroll.scrollTop = 0;
      }else{
       objScroll.scrollTop ++; 
      } 
     }
     var myScroll = setInterval(function(){scrollIng()},30);
     objScroll.onmouseover = function(){
      clearInterval(myScroll);
     }
     objScroll.onmouseout = function(){
      myScroll = setInterval(function(){scrollIng()},30);
     }
    }else{
     var timer;
     function startScroll(){
      timer=setInterval(function(){scrollUp()},30);
      objScroll.scrollTop++;
     }
     function scrollUp(){
      if(objScroll.scrollTop % json.height==0){
       clearInterval(timer);
       setTimeout(startScroll,2000);
      }else{
       objScroll.scrollTop++;
       if(objScroll.scrollTop >= objScroll.scrollHeight/2){
        objScroll.scrollTop =0;
       }
      }
     }
     setTimeout(startScroll,1000);
    }
   }
  })()
  window.onload=function(){
   //on:间歇滚动/无缝滚动 height:间歇滚动的高度
   scrollUp({on:true,id:\'block\'});
   scrollUp({id:\'block2\',height:120});
  }
  
 </script>
</head>
<body>
 <div class=\"box\">
  <div class=\"block\" id=\"block\">
   <div class=\"item\">1无缝滚动</div>
   <div class=\"item\">2无缝滚动</div>
   <div class=\"item\">3无缝滚动</div>
   <div class=\"item\">4无缝滚动</div>
   <div class=\"item\">5无缝滚动</div>
   <div class=\"item\">6无缝滚动</div>
   <div class=\"item\">7无缝滚动</div>
   <div class=\"item\">8无缝滚动</div>
   <div class=\"item\">9无缝滚动</div>
   <div class=\"item\">10无缝滚动</div>
   <div class=\"item\">11无缝滚动</div>
   <div class=\"item\">12无缝滚动</div>
   <div class=\"item\">13无缝滚动</div>
   <div class=\"item\">14无缝滚动</div>
   <div class=\"item\">15无缝滚动</div>
  </div>
 </div>
 <div class=\"box\">
  <div class=\"block\" id=\"block2\">
   <div class=\"item\">1间歇滚动</div>
   <div class=\"item\">2间歇滚动</div>
   <div class=\"item\">3间歇滚动</div>
   <div class=\"item\">4间歇滚动</div>
   <div class=\"item\">5间歇滚动</div>
   <div class=\"item\">6间歇滚动</div>
   <div class=\"item\">7间歇滚动</div>
   <div class=\"item\">8间歇滚动</div>
   <div class=\"item\">9间歇滚动</div>
   <div class=\"item\">10间歇滚动</div>
   <div class=\"item\">11间歇滚动</div>
   <div class=\"item\">12间歇滚动</div>
   <div class=\"item\">13间歇滚动</div>
   <div class=\"item\">14间歇滚动</div>
   <div class=\"item\">15间歇滚动</div>
  </div>
 </div>
</body>
</html>

注意点：
1.盒子块要css 溢出隐藏：overflow:hidden
2.有两个功能：间歇滚动/无缝滚动
3.先复制一块一模一样的代码，无缝滚动：执行定时器一直增加scrollTop值，当scrollTop值大于盒子高度，在设置scrollTop为0，重新来过。间歇滚动在此基础上加了setTimeout，间歇执行，在scrollTop到达指定的height停止
4.疑问：代码中setInterval(function(){scrollIng()},30);这样写才可以执行，setInterval(\'scrollIng()\',30);这样就不行，有没有大神指导下，两者有啥区别？是啥机制？

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/23617

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案