1. 主页 > 建设教程

使用jQuery实现文字向上间歇及不间断循环滚动效果的代码:

以下是使用jQuery实现文字向上间歇及不间断循环滚动效果的代码:


HTML代码:

html复制代码<div class="scroll-container">  <p class="scroll-text">这是一段不断向上滚动的文字。</p>  </div>

CSS代码:

function scrollText() {  

  var text = $(".scroll-text");  

  var height = text.outerHeight();  

  var container = $(".scroll-container");  

  var offset = container.offset().top;  

  var scrollTop = container.scrollTop();  

  var distance = offset + scrollTop - height;  

  var duration = 1000; // 滚动动画持续时间,单位为毫秒  

  var interval = 50; // 每隔多少毫秒更新一次位置  

  var steps = duration / interval; // 总的步数  

  var step = distance / steps; // 每一步需要滚动的距离  

  var currentStep = 0;  

  var currentTop = scrollTop;  

  var timer = setInterval(function() {  

    if (currentStep < steps) {  

      currentTop -= step;  

      currentStep++;  

      container.scrollTop(currentTop);  

    } else {  

      clearInterval(timer); // 到达终点后停止定时器  

    }  

  }, interval); // 每间隔一段时间执行一次函数,直到到达终点为止  

}


jQuery代码:

javascript


function scrollText() {  


  var text = $(".scroll-text");  


  var height = text.outerHeight();  


  var container = $(".scroll-container");  


  var offset = container.offset().top;  


  var scrollTop = container.scrollTop();  


  var distance = offset + scrollTop - height;  


  var duration = 1000; // 滚动动画持续时间,单位为毫秒  


  var interval = 50; // 每隔多少毫秒更新一次位置  


  var steps = duration / interval; // 总的步数  


  var step = distance / steps; // 每一步需要滚动的距离  


  var currentStep = 0;  


  var currentTop = scrollTop;  


  var timer = setInterval(function() {  


    if (currentStep < steps) {  


      currentTop -= step;  


      currentStep++;  


      container.scrollTop(currentTop);  


    } else {  


      clearInterval(timer); // 到达终点后停止定时器  


    }  


  }, interval); // 每间隔一段时间执行一次函数,直到到达终点为止  


}


使用方法:在页面加载完成后,调用scrollText()函数即可实现文字向上间歇及不间断循环滚动效果。

本文由设计学习网整理发布,不代表设计学习网立场,转载联系作者并注明出处:https://ffjianzhan.cn/wangjs/12185.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息