原生JS 实现字幕滚动

<!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 实现字幕滚动相关推荐

原生js实现字幕滚动
使用css和原生js实现的字幕滚动效果,无缝衔接效果原理容器设置固定宽度,超出部分隐藏,滚动部分绝对定位并通过定时器改变位置实现 html部分 <div class="scro ...
原生JS实现图片滚动
2019独角兽企业重金招聘Python工程师标准>>> 原生JS实现图片滚动一.原理黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设 ...
原生JS实现的滚动抽奖工具（可设置每个奖品概率、滚动速度、滚动圈数）
使用原生JS实现的滚动抽奖效果,可对每个奖品设置概率实现以下功能: 1.可针对每个奖品设置概率 2.可设置最少滚动圈数 3.可设置滚动速度 4.可设置从倒数第几个开始减慢速度演示图 HTML部分 ...
原生JS实现无限滚动瀑布流布局
API HTMLElement.offsetWidth 是一个只读属性,返回一个元素的布局宽度.一个典型的(译者注:各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的 ...
原生js实现歌词滚动以及卡拉OK效果
干货转自网易实践者社区,感谢作者[严跃杰] [歌词滚动效果] 滚动歌词比较常见的一种歌词显示方式,今天我们来讨论如何通过原生js来完成一个简单的滚动歌词实现. 一般来说,滚动歌词有如下几项需求: 1. ...
【原生JS】写滚动指定位置展示动画
用原生js做滚动到指定位置展示动画,动画效果用Animate.css 直接上代码 <!DOCTYPE html> <html lang="en"><h ...
html完成公告滚动条,原生js实现公告滚动效果
本文实例为大家分享了js实现公告滚动展示的具体代码,供大家参考,具体内容如下 1.html结构我是公告1 我是公告2 我是公告3 我是公告4 2.css样式 body, div, ul, li { ...
原生JS实现marquee 滚动字幕效果，完美解决频闪问题
marquee标签在HTML5 中已经不再受支持但是我们很多时候会用到滚动字幕的样式,所以就采用了实时动态改变元素位置的方式来实现此功能,在实现的时候用过HTML DOM setInterval() ...
原生js元素惯性滚动
元素惯性滚动 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...

原生JS 实现字幕滚动

原生JS 实现字幕滚动

原生JS 实现字幕滚动相关推荐

最新文章

热门文章