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

最新推荐文章于 2023-04-24 11:22:28 发布

置顶

若叶岂知秋vip

最新推荐文章于 2023-04-24 11:22:28 发布

阅读量886

点赞数

分类专栏： Javascript VIM/Emacs 文章标签： javascript marquee 机顶盒 IPTV EPG

本文链接：https://blog.csdn.net/gccll/article/details/78131831

版权

本文介绍如何使用原生JavaScript实现从右到左的跑马灯效果，适用于机顶盒和IPTV场景。文章详细讲解了DOM元素定义、Options选项以及Events事件，包括滚动次数统计、滚动方向控制和鼠标悬停事件处理。

摘要由CSDN通过智能技术生成

1 marquee

to simulate functions of marquee markup

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

具体需求是：

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

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

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

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

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

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

npm i

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

npm run server

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

实例化 marquee 对象

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

关注