canvas_html_制作三行情书的弹幕

三行情书的弹幕

背景
效果
- 原理
- 结束

背景

对弹幕的实现一直都很好奇，感觉像是用css的水平animation移动实现，今天来一探究竟随便拿个女神勋章
来源：https://bestvist.github.io/barrage-div/src/example.html

效果

原理

1、设置展示弹幕元素位置属性为relative
2、动态创建弹幕元素，位置属性设置absolute，left为展示宽度
3、随机设置弹幕元素top值
4、随机产生弹幕元素移动速率，修改left值

创建div节点采用absolute布局修改 left、top位置，文字设置不换行，调整文字速度。

        let div = document.createElement('div');div.style.position = 'absolute';div.style.left = this.domWidth + 'px';div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + 'px';div.style.whiteSpace = 'nowrap';div.style.color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);div.innerText = text;

css
样式背景图我使用了一张图片

* {box-sizing: border-box;
outline: none;
margin:0;
padding:0;
}
p {margin: .5em;
word-break: break-all;
}
.container {position: relative;
width: 1920;
height: 1080px;
margin: 0;
padding-right: 200px;
}
.content {width: 100%;
height: 100%;
background-image: url('../img/test.jpg');
background-size: 100% 100%;
}
.content-opt {position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100%;
}
.content-text {height: calc(100% - 30px);
margin-bottom: 30px;
border: 1px solid #ccc;
overflow: auto;
}
.content-input {position: absolute;
bottom: 0;
width: 100%;
height: 30px;
border: 1px solid #ccc;
}
.content-input input {width: 70%;
padding: 2px;
border-radius: 5px;
}
.content-input button {padding: 3px 10px;
border: none;
border-radius: 5px;
background: rgb(90, 154, 214);
}

js
弹幕文字动态生成

class Barrage {constructor(id) {this.domList = [];this.dom = document.querySelector('#' + id);if (this.dom.style.position == '' || this.dom.style.position == 'static') {this.dom.style.position = 'relative';}this.dom.style.overflow = 'hidden';let rect = this.dom.getBoundingClientRect();this.domWidth = rect.right - rect.left;this.domHeight = rect.bottom - rect.top;}shoot(text) {let div = document.createElement('div');div.style.position = 'absolute';div.style.left = this.domWidth + 'px';div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + 'px';div.style.whiteSpace = 'nowrap';div.style.color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);div.innerText = text;this.dom.appendChild(div);let roll = (timer) => {let now = +new Date();roll.last = roll.last || now;roll.timer = roll.timer || timer;let left = div.offsetLeft;let rect = div.getBoundingClientRect();if (left < (rect.left - rect.right)) {this.dom.removeChild(div);} else {if (now - roll.last >= roll.timer) {roll.last = now;left -= 3;div.style.left = left + 'px';}requestAnimationFrame(roll);}}roll(50 * +Math.random().toFixed(2));}
}

初始化数据

(function() {let barage = new Barrage('content');function appendList(text) {let p = document.createElement('p');p.innerText = text;document.querySelector('#content-text').appendChild(p);}document.querySelector('#send').onclick = () => {let text = document.querySelector('#text').value;barage.shoot(text);appendList(text);};const textList = ['一眼情不知所起， 只知开始未来， 便只为你', '螃蟹在剥我的壳，笔记本在写我。 漫天的我落在枫叶上雪花上。 而你在想我。——小雨','我是浪迹天涯的游子 爱这山河之间的诗词 你却从不看这每行诗的第一个字', '喝醉须千杯 情诗只三行 你的笑，我看一眼就醉', '我爱的人名字只有几个字 写不了三行 却铺满了整个床','你是字里行间的秘密 是笔尖暗喻的欢喜 是我珍藏心底的触手可及', '我恋过星辰大海 爱过山川河流 你是我最终的归宿', '子曰：三思而后行 1...2...3... 我喜欢你','风吹草动 花开悸动 见你心动 — 遇见篇——三行情诗', '我还是很喜欢你 柳动蝉鸣 日落潮汐 不能自己', '我还是很喜欢你 像梅雨时节的落雨 延绵无期', '天上的云 身旁的风 眼前的你','你应该在我身边就好像 月亮应该藏在被窝里 银河应该绕着地球转', '早餐 午餐 你是我的一日三餐 ', '一行在梦里 一行在心里 一行你你你','这场相遇真是一个奇迹 就像撒哈拉长满玫瑰 我恰好遇到你', '你是孩童眼角的无邪 是诗人眼角的偏执 是我用尽一生也戒不掉的强迫症','把眉清目秀还给山水天地 把松间细雨还给初遇 把一见钟情还给你','把眉清目秀还给山水天地 把松间细雨还给初遇 把一见钟情还给你', '春雨及冰蚕 白昼与黑夜 我和你', '我与你 很远 隔着纱，隔着帘 隔着岁华，隔着流年','我看见雨， 落在我眼里， 变成了你。', '我爱你 爱你 你', '你是我的固定资产， 我爱你是在建工程， 希望和你慢慢折旧。', '我想牵着你的手 一起走过这条路 路这头是青丝，路那头是白发。','我想娶 你愿嫁 才成家', '你看着我， 酷酷的说:我喜欢你， 翻个身，梦醒了。', '我听说十三月有你， 便穷尽这一生去寻你， 满天柳絮倾覆了我情意。','我还是很喜欢你 像上学时做不出的难题 困住自己', '低低呓语，吟叹你的名字，如诗 觥筹交错，沉醉你的样子，如酒 南柯一梦，品忆你的身影，如茗', '云恋雨 风徐徐 如我爱你，没有限期','我爱你 其余两行 都是多余 ', '你在赏景 我在赏你 我们都在景中', '你是雪中的迎春、雨中的彩虹。 我在格陵兰的心中将你种下。 在撒哈拉的脚下为我祈祷。','我还是很爱你 像晨风拂过树梢 悄无声息', '孔子曰：吾日三省吾身 每次要反省自己 我怎么那么喜欢你', '我是个路痴 走到了你的世界 就再也走不出来了','我想好了 如果你不见了我就翻遍天下去寻你 如果你不在了我就抛弃天下去陪你', '清晨的阳光 慵懒的你 微笑的我', '我喜欢夏天的雨 雨后的光 和任何时候的你','朦胧的远方 和朦胧的你 便是我朦朦胧胧的思念', '遇见你是 恰逢千岛寒流与日本暖流交汇 温暖了整片海域', '孔子说：不耻下问 那我可以问一句 我可以爱你吗','我还是很喜欢你 像心间的晴天雨 彩虹相依', '见到你的那个午后 我的世界 从此没有了冬秋', '一曲相思 半点离愁 如何与君共白头', '所有的灵感都来源于你 可我写完了整首诗 还是没有写完你','山有木兮木有枝 心悦是你 不知也是你', '我曾像风一样自由 自从牵了你的手 白云从此刻驻留 ', '风带着秘密吹过一整片森林 于是每一棵树都知道 我只喜欢你','我有好多个一瞬间， 看着街边路人熙熙攘攘， 发现抬起的手触不到你。', '你就像童话故事里一样 不一定住在皇宫里 但一定是我的公主', '分享到微信 最美好的邂逅 无非你有一生 我有一世','我做了一个很长的梦 梦里看见了你 我想做上一辈子', '书信很慢 情话很长 我很想你 ', '我还是很喜欢你 像是隔着山的海 不远万里也要来见你', '忽见你一笑 山花烂漫了 我心也动了','文采斐然的你 古灵精怪的你 我喜爱的你', '浮世三千 吾爱有三 日 月 卿 日为朝 月为暮 卿为朝朝暮暮 ', '那就是风该有的样子 又像云穿过思念 刚好遇见你','黑暗里有光，烈日下有影 如影随形的想念 逃不过你', '关于你 我知之不多 却念念不忘', '喜欢你呀 像一颗奶糖 从眉间甜到脚尖 ', '关于你， 我知之不多， 却念念不忘！ ','有你的日子 风很轻，云很淡 天空很蓝'];textList.forEach((s) => {barage.shoot(s);appendList(s);})})()

视图层

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>三行情书弹幕</title><link rel="stylesheet" href="./example.css">
</head>
<body>
<div class="container"><div id="content" class="content"></div><div class="content-opt"><div id="content-text" class="content-text"></div><div class="content-input"><input id="text" type="text"><button id="send">发送</button></div></div>
</div>
<script src="./barrage.js"></script>
<script src="./example.js"></script>
</body>
</html>

结束

感谢阅读！如有错误欢迎指正。

canvas_html_制作三行情书的弹幕相关推荐

三行情书代码_用三行代码优化您的交易策略
三行情书代码 If you want to consistently earn money with your investments, backtesting is one of the best ...
计算机专业的三行情书,各专业三行情书，看懂你就是全能学霸！
导读你所在的专业有哪些三行情书? 你说工科的我不解风情,我说我愿意用我的专业写三行情书,读给你听.先等等,等我看明白了再给你答复. @四川师范大学晒出了不少三行情书:仔细读,很多都用上了专业梗,意境 ...
c语言情书相关活动策划案,三行情书活动策划案
三行情书活动策划案一.活动背景栀子花开,不舍别离,四年时光,弹指一瞬.青春即将散场,记忆永不磨灭,悄然而至的盛夏昭示着离别时刻在即,又是一年毕业季,青葱记忆永留存.20xx届毕业生离校在即,河南工 ...
三行情书计算机学院,各大学最美三行情书
各大学最美三行情书来自句子大全栏目最新推荐.这些句子来自小编精心整理,如果您喜欢,欢迎收藏一下噢. 每个大学里面都有很多不同的专业,那么各个不同的专业有什么样的特殊的三行情书吗,接下来小编给大家带来了 ...
计算机专业的三行情书,这是我们专业的三行情书，请查收
原标题:这是我们专业的三行情书,请查收动动手指,你也可以关注我们当夏目漱石将 "I love you." 翻译成"今晚的月色很美"时我们体会到了感情中 ...
c语言情书大赛图片,最美三行情书大赛获奖作品
谁闯进了谁的岁月,从此,谁在夜里写满三行情书,谁在想谁一念成痴.学习啦小编在此整理了最美三行情书大赛获奖作品,供大家参阅,希望大家在阅读过程中有所收获! 最美三行情书大赛获奖作品(1) 1. 我只在两 ...
计算机学院三行情书,各大学最美三行情书精选
每个大学里面都有很多不同的专业,那么各个不同的专业有什么样的特殊的三行情书吗,接下来小编给大家带来了一些各大学最美三行情书,希望大家能够有所感悟,一起来看吧. 1.财经学院如果没有遇见你我的资产负 ...
php三行情书,文案得看看这些三行情书
文章来源:文案来啦(ID:CWtoday) 情书 ? 这两个字眼似乎离我们越来越远了. 曾几何时,我们因那一张小小的纸条兴奋不已但现在,情话顺手拈来,却毫无波澜. 所以,我想分享一些三行情书给你们. ...
计算机专业的三行情书,计算机科学学院成功举办“三行情书”活动
2018年10月16日,在母校四十周年校庆到来之际,计算机科学学院三大组织在全校范围内举办了一场用三行语言来表达对母校的爱--"三行情书"活动!本次活动于18日下午成功落下帷幕. ...

canvas_html_制作三行情书的弹幕

三行情书的弹幕

背景

效果

原理

结束

canvas_html_制作三行情书的弹幕相关推荐

最新文章

热门文章