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

1 marquee

to simulate functions of marquee markup

因公司业务需要，得弄个跑马灯的效果，但是奈何机顶盒的兼容性差到爆，连

marquee

标签得一些属性都不支持（暂且不谈该标签被废弃一事）

具体需求是：

实现基本的滚动效果，从右到左

实现滚动次数的统计，在重新进入页面的时候需要衔接上次的次数去滚动（不能超过滚动总次数）

次数简单，

marquee

的

loop

属性就能够完成，监听已滚过的次数，考虑过使用

onbounce

事件，

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

比如：

jQuery

的滚动插件，

iScroll

, 什么的

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

jQuery

，

iScroll

同理。

2 Scroll From Right To Left

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

滚动的次数。

2.1 clone

git clone https://github.com/gcclll/marquee.git[/code] 
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', // or 'l2r'
timeout: 10,
scrolledCount,
totalCount,
ending: function (data) {
// 一次滚动结束，计数
_this.updateMsgScrolledCount();
},
end: function () {
// 滚动总次数结束 TODO
console.log('scroll end.');
_this.getMarkMsgReadFlag(1);
}

}
).start();


第一个参数(
parent
)

document.querySelector('.scrolls')
 这是个容器元素对象

第二个参数(
el
)

document.querySelector('.marquee')
 这个元素是存放要滚动的内容的元素

第三个参数(
options
)

详情见下节。

3 DOM 元素定义
3.1 DOM 结构
<div class="container">
<div class="target">
我是要滚动的文字内容
</div>
</div>


3.2 父元素（即容器元素）
.container {
position: relative;
width: 1280px;
height: 30px;
overflow: hidden;
}


对于容器元素的样式，高度必须要设置，宽度可以设置需要的宽度，这里设置成 
1280px
 原因是

我现在的环境是高清IPTV电视环境，目前的需求也是电视顶部的从右边屏幕外滚到左边出屏幕。

overflow: hidden
 和 
position: relative
 两个是必须要有的样式（当然也可以不显示的设置出来），因为

在 
_init
 函数里面有兼容没有设置的情况，如下：

if (!this.parent.style.position) {
this.parent.style.position = 'relative';
}

if (!this.parent.style.overflow) {
this.parent.style.overflow = 'hidden';
}


为了避免滚动消息不显示，所以父容器的高度和宽度是必须要设置的，不做此兼容是方便高宽自由配置。

3.3 
marquee
 元素(即包裹文字的元素)
.target {
position: absolute;
height: 30px;
line-height: 30px;
display: inline-block;
width: auto;
}


该元素的样式也有几项是必须要设置的，同样也做了不设置时的兼容处理

这里有个 
bug
，就是从起点出来的时候是一个个字蹦出来的，如果是中文那么会一个个中文蹦出来，如果是英文单词

会一个单词一个单词的蹦出来

上面的 
bug
 可以用这个样式去解决：

.target {
word-break: break-all;
}


会发现使用 
break-all
 在中文字时没效果，英文单词会效果会好点，不再是一个单词一个单词蹦出来了，却是一个字母一个字母的蹦出来，而我要的效果是能平滑的滚出来。

那就需要用到这个样式

.target {
white-space: nowrap;
}


nowrap
 表示不换行处理，不太明白使用这个之后就能很平滑的滚出来。

PS: 文档写到这里，反应出一个问题，其实我上面的兼容没有设置样式的处理中其实每次都会去设置，只要你没采用

行内样式它就会执行，这点没怎么注意。原因是通过 
style
 标签内的样式通过 
this.el.style
 是没法获取到的。

4 Options 选项
这个参数是滚动方式的一些参数，对象类型，比如：(
timeout
, 
scrolledCount
, 
totalCount
, …)

4.1 timeout:
滚动计时器的延时时间

4.2 scrolledCount
已经滚动过的次数，用来控制重新进入页面时需要滚动的次数

4.3 totalCount
滚动的总次数，可以后台配置

4.4 ending
类型：
Function
，滚动一次结束时的回调

4.5 end
类型：
Function
，整个滚动过程结束时的回调，即滚动 
totalCount
 次后的回调

4.6 direction
指定滚动的方向

r2l
 表示从右到左滚动

l2r
 表示从左到右滚动

u2d
 表示从上到下滚动

d2u
 表示从下到上滚动

5 Events 事件
5.1 onmouseover
暂停滚动

// events
this.el.onmouseover =  () => {
this.pause();
};


5.2 onmouseout
恢复滚动

this.el.onmouseout = () => {
this.resume();
};