html文字无缝滚动js代码

萧楚容 3周前 11浏览 0评论

  HTML文字无缝滚动JS代码是一种非常实用的网页元素,可以使你的网站更加动感,增强用户的体验感。下面,我们就来介绍一下HTML文字无缝滚动JS代码的实现方法。

  function TextScroll(type, speed, height) { 
  var that = this;
  this.type = type;
  this.speed = speed;
  this.height = height;
  this.container = document.querySelector(".scroll-container");
  this.content = this.container.querySelector(".scroll-content");
  this.btnUp = this.container.querySelector(".scroll-up");
  this.btnDown = this.container.querySelector(".scroll-down"); 
  this.scrollHeight = this.content.scrollHeight;
  this.init = function() { 
    if(this.type==1){that.container.style.overflow = "scroll";that.container.style.height = "400px";} 
    if(this.type==2){that.container.style.height = that.height+"px";that.content.style.marginTop=-that.height+"px";} 
    that.content.innerHTML += that.content.innerHTML;} 
  this.play = function() { 
    var scroll = setInterval(function(){ 
    if(that.type==1){
      var scrollTop = that.container.scrollTop; 
      that.container.scrollTop = scrollTop+1; 
      if(scrollTop == that.scrollHeight) {
        that.container.scrollTop = 0;
      } 
    } 
    if(that.type==2){ 
      var marginTop = parseInt(that.content.style.marginTop); 
      if(marginTop>=-that.scrollHeight){ 
        that.content.style.marginTop=(marginTop-1)+"px"; 
      }else{ 
        that.content.style.marginTop = -that.height + "px"; 
        that.content.style.marginTop=(marginTop+1)+"px"; 
        }
      }
   },that.speed); 
  } 
  this.stop = function() { 
    var scroll = setTimeout(function(){ 
    clearInterval(scroll); 
   },1); 
  } 
}

  以上是一个HTML文字无缝滚动JS代码的示例,代码中包含了样式、HTML和js三部分。使用该代码实现无缝滚动的效果,可以根据自己的需要进行适当调整,比如速度、高度等等。总之,HTML文字无缝滚动JS代码是网页设计中常用的特效之一,掌握该技能,对于提升网页的美观度和功能性都有很大帮助。

下一篇 python3 mcpi