手机屏幕弹幕纵向滚动，添加弹幕实时滚动html demo

手机屏幕弹幕纵向滚动，添加弹幕实时滚动

transform 可在不改变页面dom结构的前提下进行实时动画，比传统的通过top的高度来做动画性能要高出很多。
requestAnimationFrame 链接推荐用此做动画，比传统setInterval渲染性能更强。

滚动原理就是设置一个固定位置position:relative的父盒子，子盒子相对父盒子，溢出部分隐藏掉。方法一、通过改变子盒子的top高度来进行滚动。方法二、通过transform改变其纵坐标偏移即可实现滚动（推荐）
根据原生js自己改成相对于的vue和react写法

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.box {height: 190px;width: 50%;position: relative;border: 1px solid red;overflow: hidden;}.box-ul {position: absolute;left: 0;top: 0;overflow: hidden;}.ul-li {height: 40px;background: pink;margin: 4px;}</style>
</head>
<body><button onclick="addMessage()">添加弹幕</button>
<div class="box" id="box"><ul class="box-ul" id="ul"><li class="ul-li">11111111</li><li class="ul-li">22222222</li><li class="ul-li">33333333</li><li class="ul-li">44444444</li><li class="ul-li">555555555</li><li class="ul-li">6</li><li class="ul-li">7</li><li class="ul-li">8</li><li class="ul-li">9</li></ul></div>
<script>const box = document.getElementById("box");const ul = document.getElementById("ul");let posY = 0;let boxHeight = box.clientHeight;//可见高度 190let ulHeight = ul.offsetHeight; //实际高度 400// stop move Height  -210 = 190-400// console.log(ulHeight);let reqFrame = ''window.onload = function () {console.log("window onload");reqFrame = requestAnimationFrame(step);}function addMessage() {const li = document.createElement("li");li.textContent = "添加";li.className = "ul-li"ul.appendChild(li);ulHeight = ul.offsetHeight;step()}function step() {if (posY < (boxHeight - ulHeight)) {cancelAnimationFrame(reqFrame)} else {posY -= 1;requestAnimationFrame(step);ul.style.transform = `translateY(${posY}px)`;}}</script>
</body>
</html>

手机屏幕弹幕纵向滚动，添加弹幕实时滚动html demo相关推荐

Axure - 实现手机屏幕滚动效果
1.新建项目 2.拖拽一个矩形到顶部和底部并分别命名为navTop和navBtm 3. 拖拽一个动态面板到元件中间,并调整大小,命名为内容 4. 双击State1,编辑State1的面板状态.也可以 ...
EasyPusher实现Android手机屏幕桌面直播,实时推送操作画面,用于手游直播等应用
本文转自EasyDarwin开源团队成员John的博客:http://blog.csdn.net/jyt0551/article/details/52651194 由于Android 5.0提供了捕获 ...
html滑动直播,HTML5 canvas实现的静态循环滚动播放弹幕
本文主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕,分享给大家,具体如下: 使用方法和API 语法如下: canvasBarrage(canvas, data); 其中: canvas ...
表格比手机屏幕宽时不压缩，可左右滚动，格子内容不换行
Bootstrap响应式表格比较宽时,为适应手机屏幕宽度,会自动对各列进行压缩,内容分多行显示.但像姓名分几行显示效果不好.我们希望表格显示不下时,不改变列宽度,而是出现滚动杆,保持表格原来的外观. ...
Android开发时手机屏幕实时同步显示在电脑上
1.下载 Android Screen Monitor http://code.google.com/p/android-screen-monitor/ (1) 下載 ASM_2_40.zip 并解压 ...
scrcpy-将Android手机屏幕实时投射到电脑
scrcpy 将 Android 手机屏幕实时投射到电脑参考: Github - Genymobile/scrcpy Build scrcpy 从软件库安装 Linux # ubuntu apt i ...
在网站上的视频直播添加弹幕做法
弹幕使用的是阿里云的Aliplayer 参考官网:https://help.aliyun.com/document_detail/125570.html?spm=a2c4g.11186623.6.10 ...
文字滚动手持弹幕小程序
文字滚动手持弹幕小程序产品功能: [基本功能]字体颜色.横竖屏.滚动速度.字体大小.历史收藏.背景颜色设置 [*功能]支持本地上传背景图片.动图设置.边框设置.自定义音乐.多种字体效果图片应用场 ...
手机屏幕画面实时直播
转载一个很有意思的手机画面直播的教程. 如何做手机录屏直播?准确一点说是手机桌面屏幕视频直播,很多人可能遇到这个困惑,咋实现呢?我做个教程让大家知道如何实现吧. 工具: 手机屏幕录制工具:用于发起直播 ...

手机屏幕弹幕纵向滚动，添加弹幕实时滚动html demo

手机屏幕弹幕纵向滚动，添加弹幕实时滚动

手机屏幕弹幕纵向滚动，添加弹幕实时滚动html demo相关推荐

最新文章

热门文章