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

2019-11-20 09:34:59

字体：大中小

来源：转载

供稿：网友

间歇、无缝滚动效果（用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);这样就不行，有没有大神指导下，两者有啥区别？是啥机制？

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

上一篇：JS中Json数据的处理和解析JSON数据的方法详解

下一篇：js精准的倒计时函数分享