zoukankan      html  css  js  c++  java
  • 使用JavaScript完成文字向上间歇滚动

    使用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;

    如有问题,欢迎留言(・∀・)

  • 相关阅读:
    ajax
    前端学数据库之子查询
    读书笔记:《HTML5开发手册》Web表单
    阅读《编写可读代码的艺术》笔记
    windows环境下sublime的nodejs插件详细安装图解
    有关css3的一些问题
    前面的话
    gulp思考
    10种排序算法分析
    ajax异步请求
  • 原文地址:https://www.cnblogs.com/happypayne/p/7534975.html
Copyright © 2011-2022 走看看