【marquee标签插件】原生JavaScript模拟<marquee>的跑马灯效果

1 marquee

to simulate functions of marquee markup

因公司业务需要，得弄个跑马灯的效果，但是奈何机顶盒的兼容性差到爆，连 marquee 标签得一些属性都不支持（暂且不谈该标签被废弃一事）

具体需求是：

1. 实现基本的滚动效果，从右到左
2. 实现滚动次数的统计，在重新进入页面的时候需要衔接上次的次数去滚动（不能超过滚动总次数）

次数简单， marquee 的 loop 属性就能够完成，监听已滚过的次数，考虑过使用 onbounce 事件，

但是经过多次尝试，盒子上没法触发这个事件，经过查阅网络资料还是没什么好的方法，也找过一些插件什么的，

比如：jQuery 的滚动插件，iScroll, 什么的

最终放弃插件，原因在于不能为了这么简单的一个需求去引入 jQuery ，iScroll 同理。

2 Scroll From Right To Left

目前该代码只是简单的实现了从右到左的一个滚动效果，可以控制次数，也可以进入退出页面的时候衔接上一次
滚动的次数。

2.1 clone

git clone https://github.com/gcclll/marquee.git

2.2 install packages

npm i

其实 package.json 里面很多包都是在这用不到的，直接用这个，原因是这份 webpack 配置
是在学习 vue + webpack 的时候，自己手把手敲出来的，虽然很初级，但是也一直在维护这个东西。

2.3 server

npm run server

浏览器就会打开该项目的页面，就能看到效果了。

2.4 code

实例化 marquee 对象

new Marquee(
   document.querySelector('.scrolls'),
   document.querySelector('.marquee'),
   {
       direction: 'r2l'