使用JavaScript完成文字向上间歇滚动

Posted 2020-10-07 小目标

使用javascript完成文字的间歇滚动

const init = (initData) => {
  const area = initData.area;
// 设置单行滚动的高度；
  const iLineHeight = initData.iLineHeight ? initData.iLineHeight : 24;
// 设置滚动的速度；
  const speed = initData.speed ? initData.speed : 50;
  let time;
// 设置延迟；
  const delay = initData.delay ? initData.delay : 2000;

  area.scrollTop = 0;
// 克隆整个容器，此处也可以不用克隆整个容器内容，根据需要克隆，只要保证滚动一遍之后等待下次滚动开始前不会出现空白就好；
  area.innerhtml += area.innerHTML;

// 向上滚动主函数；
  function startScroll() {
    time = setInterval(() => scrollUp(), speed);
    area.scrollTop++;
  }

// 判断函数；
  function scrollUp() {
// 判断是否为行数的整数倍；
    if (area.scrollTop % iLineHeight === 0) {
      clearInterval(time);
      // 设置延迟；
      setTimeout(startScroll, delay);
    } else {
      area.scrollTop++;
      // 判断是否已经全部滚动完毕，若是，初始化；
      if (area.scrollTop >= area.scrollHeight / 2) {
        area.scrollTop = 0;
      }
    }
  }

// 启动整个函数；
  setTimeout(startScroll, delay);
};
const marquee = (initData) => {
  init(initData);
};
export default marquee;

 

如有问题，欢迎留言(???)