原生JS实现marquee 滚动字幕效果，完美解决频闪问题

marquee标签在HTML5 中已经不再受支持

但是我们很多时候会用到滚动字幕的样式，所以就采用了实时动态改变元素位置的方式来实现此功能，在实现的时候用过HTML DOM setInterval() 方法，但是会出现频闪的现象，初步估计是因为其他js的时间对其产生影响，后来改用了window.requestAnimationFrame()方法完美解决问题。

关于window.requestAnimationFrame()方法的详解请看下面地址。

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>滚动字幕</title><style>#marquee {color: red;display: block;width: 96%;height: 30px;margin: 0 auto;position: relative;overflow: hidden;}#marquee_text {position: absolute;top: 0;left: 100%;line-height: 30px;display: block;word-break: keep-all;text-overflow: ellipsis;white-space: nowrap;}</style>
</head>
<div id="marquee"><span id="marquee_text">字幕会滚动啦字幕会滚动啦~</span>
</div>
<script type="text/javascript">marquee("marquee", "marquee_text");function marquee(p, s) {var scrollWidth = document.getElementById(p).offsetWidth;var textWidth = document.getElementById(s).offsetWidth;var i = scrollWidth;console.log(scrollWidth, textWidth);function change() {i--;if (i < -textWidth) {i = scrollWidth;}document.getElementById(s).style.left = i + "px";window.requestAnimationFrame(change);}window.requestAnimationFrame(change);}
</script>
</html>

原生JS实现marquee 滚动字幕效果，完美解决频闪问题相关推荐

原生JS实现的滚动抽奖工具（可设置每个奖品概率、滚动速度、滚动圈数）
使用原生JS实现的滚动抽奖效果,可对每个奖品设置概率实现以下功能: 1.可针对每个奖品设置概率 2.可设置最少滚动圈数 3.可设置滚动速度 4.可设置从倒数第几个开始减慢速度演示图 HTML部分 ...
html 字幕飘动效果,html 滚动字幕制作滚动字幕效果参数
制作滚动字幕效果:marquee标签如下:<MARQUEE direction=up height=146 οnmοuseοut=start() οnmοuseοver=stop() scro ...
html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码
一.滚轮事件当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Sa ...
Html实现滚动字幕效果
在 <body> 与 </body> 之间加入: <TABLE BORDER="0" CELLSPACING="5" CELLPA ...
原生JS实现图片滚动
2019独角兽企业重金招聘Python工程师标准>>> 原生JS实现图片滚动一.原理黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设 ...
原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
图片向上滚动字幕代码html,如何通过制作滚动字幕的软件实现这种片尾的向上滚动字幕效果...
如何制作滚动字幕特殊滚动类字幕制作向上向下向左向右滚动字幕制作效果含拖动和消失全程真是酷B了爽呆了,赶快学习吧! 电影.连续剧等影视作品片尾,都会在播放片尾曲时,出现向上滚动的字幕,显示演员表 ...
html鼠标平滑滚动效果,JS特效代码 JS动态平滑滚动菜单效果
JS特效代码 JS动态平滑滚动菜单效果 www.css5.net body {cursor:crosshair; background:#111; margin:0; padding:0; posit ...
用原生JS实现3D轮播效果
用原生JS实现3D轮播效果实现思路: 先实现无缝轮播效果添加3D效果完善代码增加自动轮播效果效果如下: 视图中显示3张图片,并通过CSS的透视和旋转实现3D效果,当无任何操作时,图片自动循环 ...

原生JS实现marquee 滚动字幕效果，完美解决频闪问题

原生JS实现marquee 滚动字幕效果，完美解决频闪问题相关推荐

最新文章

热门文章