码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2017-09-17 13:45:57      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:++   func   else   innerhtml   启动   bsp   不用   fun   ==   

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

 

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

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

标签:++   func   else   innerhtml   启动   bsp   不用   fun   ==   

原文地址:http://www.cnblogs.com/happypayne/p/7534975.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!