全屏弹幕
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹幕效果</title>
<style>
/* 设置弹幕的样式 */
.bullet {
position: absolute;
font-size: 20px;
color: white;
text-shadow: 1px 1px 1px black;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// 获取弹幕容器
var container = document.getElementById('container');
// 定义弹幕数据
var data = [
{ text: '这是第一条弹幕', color: 'red' },
{ text: '这是第二条弹幕', color: 'green' },
{ text: '这是第三条弹幕', color: 'blue' }
];
// 定义弹幕速度
var speed = 2;
// 定义弹幕间隔
var interval = 1000;
// 定义弹幕位置
var topArr = [];
for (var i = 0; i < 10; i++) {
topArr.push(i * 30);
}
// 定义弹幕索引
var index = 0;
// 定义弹幕定时器
var timer = setInterval(function() {
// 获取弹幕数据
var bullet = data[index];
// 创建弹幕元素
var span = document.createElement('span');
span.className = 'bullet';
span.innerText = bullet.text;
span.style.color = bullet.color;
// 随机获取弹幕位置
var top = topArr[Math.floor(Math.random() * topArr.length)];
span.style.top = top + 'px';
// 将弹幕元素添加到容器中
container.appendChild(span);
// 计算弹幕宽度
var width = span.offsetWidth;
// 定义弹幕起始位置
var left = container.offsetWidth;
span.style.left = left + 'px';
// 定义弹幕移动定时器
var bulletTimer = setInterval(function() {
// 计算弹幕当前位置
left -= speed;
span.style.left = left + 'px';
// 判断弹幕是否移出容器
if (left < -width) {
// 移除弹幕元素
container.removeChild(span);
// 清除弹幕移动定时器
clearInterval(bulletTimer);
}
}, 10);
// 更新弹幕索引
index++;
if (index >= data.length) {
index = 0;
}
}, interval);
</script>
</body>
</html>盒子弹幕
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Danmaku Effect</title>
<style>
/* danmaku容器的样式 */
.danmaku-container {
position: relative;
height: 300px;
background-color: black;
color: white;
font-size: 20px;
overflow: hidden;
}
/* danmaku的样式 */
.danmaku {
position: absolute;
top: 0;
white-space: nowrap;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="danmaku-container"></div>
<script>
// 函数用于创建新的弹库
function createDanmaku(text) {
// Create a new danmaku element
var danmaku = document.createElement("div");
danmaku.classList.add("danmaku");
danmaku.innerText = text;
//设置danmaku位置到容器的右边缘
danmaku.style.right = "0";
//设置danmaku顶部位置为0到容器高度之间的随机值
var container = document.querySelector(".danmaku-container");
danmaku.style.top = Math.floor(Math.random() * container.offsetHeight) + "px";
//添加danmaku到容器
container.appendChild(danmaku);
//将danmaku动画到容器的左边缘
var animationDuration = 5000; // 5 秒
var danmakuWidth = danmaku.offsetWidth;
var containerWidth = container.offsetWidth;
var distance = containerWidth + danmakuWidth;
var duration = (distance / containerWidth) * animationDuration;
danmaku.style.transition = "transform " + duration + "ms linear";
danmaku.style.transform = "translateX(-" + distance + "px)";
// 动画完成后从容器中移除弹幕
setTimeout(function() {
danmaku.remove();
}, duration);
}
// 函数生成随机弹库文本
function generateDanmakuText() {
var texts = ["Hello", "World", "Lorem", "Ipsum", "Dolor", "Sit", "Amet"];
var index = Math.floor(Math.random() * texts.length);
return texts[index];
}
// 每2秒生成一个新的弹幕
setInterval(function() {
var text = generateDanmakuText();
createDanmaku(text);
}, 2000);
</script>
</body>
</html>视频弹幕
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹幕效果</title>
<style>
#video-container {
position: relative;
width: 640px;
height: 360px;
margin: 0 auto;
}
#video {
width: 100%;
height: 100%;
}
#danmu-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.danmu {
position: absolute; /* 定位弹幕 */
font-size: 24px; /* 设置字体大小 */
white-space: normal; /* 防止换行 */
color: white; /* 设置字体颜色 */
text-shadow: 1px 1px 2px black; /* 添加文字阴影 */
animation: move 10s linear forwards; /* 设置动画 移动 10秒 线性向前 向前 */
}
/*
使用@keyframes 规则定义，指定动画名称move和动画的关键帧
from：关键帧指定动画的的起始状态，即将弹幕元素向右平移其宽度的2500％。
to：关键帧指定动画的结束状态，即将弹幕元素向左平移其宽度的100％。
transform属性用于指定平移。
*/
@keyframes move {
from {
transform: translateX(640px);
}
to {
transform: translateX(-200%);
}
}
.box1{
display: flex; /*排成一行，并根据需要换行。*/
justify-content: center; /*在主轴上居中对齐。*/
margin-top: 40px;/*元素之间留出40像素的空间 */
}
/*
弹幕输入框
*/
.box1 .barrage-input{
padding: 10px; /*内边距*/
font-size: 16px; /*字体大小*/
border-radius: 5px; /* 边框圆角*/
border: none; /* 去掉边框*/
box-shadow: 1px 1px 2px gray; /* 添加阴影*/
}
/*
弹幕提交按钮
*/
.box1 .barrage-but{
padding: 10px; /* 内边距*/
font-size: 16px; /* 字体大小*/
border-radius: 5px; /* 边框圆角*/
border: none; /* 去掉边框*/
box-shadow: 1px 1px 2px gray; /* 添加阴影*/
background-color: #4CAF50; /* 背景颜色*/
color: white; /* 字体颜色*/
}
</style>
</head>
<body>
<div id="video-container">
<video id="video" src="Docker.mp4" controls></video>
<div id="danmu-container"></div>
</div>
<div class="box1">
<input type="text" id="danmu-input" placeholder="请输入弹幕" class="barrage-input">
<button id="danmu-send" class="barrage-but">发送</button>
</div>
<script>
// 获取弹幕容器、输入框和发送按钮
const danmuContainer = document.getElementById('danmu-container');
const danmuInput = document.getElementById('danmu-input');
const danmuSend = document.getElementById('danmu-send');
// 给发送按钮添加点击事件监听器
danmuSend.addEventListener('click', () => {
// 创建一个新的div元素
const danmu = document.createElement('div');
// 添加danmu类
danmu.classList.add('danmu');
// 设置弹幕文本为输入框中的值
danmu.innerText = danmuInput.value;
// 将弹幕添加到弹幕容器中
danmuContainer.appendChild(danmu);
// 清空输入框
danmuInput.value = '';
});
</script>
</body>
</html>© 版权声明
文章版权归原作者所有，本站只做转载和学习。声明：下载本站资源即同意用户协议，本站程序只是提供给开发者学习研究。
THE END
- 最新
- 最热
只看作者