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

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

1 marquee

to simulate functions of marquee markup

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

具体需求是:

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

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

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

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

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

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'
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

若叶岂知秋vip

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值