宝塔区政府门户网站集约化建设中标权威seo技术

题八：滚动弹幕

要求：

1.页面上漂浮字体大小不一、颜色不一，从左向右滚动的弹幕；

2.底部中间有一个发送功能，可以发送新的弹幕；

3.底部的发送部分可以向下收起和弹出。

html

  <div id="danmu-container"></div><div id="control-panel"><button id="toggle-btn">▲</button><div id="input-box"><input type="text" id="danmu-input" placeholder="输入弹幕内容"><button id="send-btn">发送</button></div></div>

css

  body {margin: 0;overflow: hidden;background: white;font-family: '微软雅黑', sans-serif;}#danmu-container {height: calc(100vh - 60px);position: relative;}.danmu {position: absolute;white-space: nowrap;animation: move linear;pointer-events: none;}@keyframes move {from { transform: translateX(100vw); }to { transform: translateX(-100%); }}#control-panel {position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);transition: all 0.3s ease;}#control-panel.hidden {transform: translate(-50%, 100%);}#input-box {background: rgba(255,255,255,0.9);padding: 15px;border-radius: 10px 10px 0 0;box-shadow: 0 -2px 10px rgba(0,0,0,0.2);display: flex;gap: 10px;}#toggle-btn {position: absolute;top: -30px;left: 50%;transform: translateX(-50%);background: #fff;border: none;padding: 5px 20px;border-radius: 15px 15px 0 0;cursor: pointer;box-shadow: 0 -2px 5px rgba(0,0,0,0.1);}#danmu-input {flex: 1;padding: 8px;border: 1px solid #ddd;border-radius: 4px;min-width: 300px;}#send-btn {background: #2196F3;color: white;border: none;padding: 8px 20px;border-radius: 4px;cursor: pointer;transition: background 0.3s;}#send-btn:hover {background: #1976D2;}

js

  const danmuContainer = document.querySelector('danmu-container');const danmuInput = document.querySelector('danmu-input');const sendBtn = document.querySelector('send-btn');const toggleBtn = document.querySelector('toggle-btn');const controlPanel = document.querySelector('control-panel');// 生成随机颜色function getRandomColor() {return '#' + Math.floor(Math.random()*16777215).toString(16);}// 创建弹幕元素function createDanmu(text) {const danmu = document.createElement('div');danmu.className = 'danmu';danmu.textContent = text;// 随机样式danmu.style.color = getRandomColor();danmu.style.fontSize = `${Math.floor(12 + Math.random() * 12)}px`;danmu.style.top = `${Math.random() * (danmuContainer.offsetHeight - 30)}px`;// 动画配置const duration = 8 + Math.random() * 4; // 8-12秒danmu.style.animation = `move ${duration}s linear`;// 动画结束后移除元素danmu.addEventListener('animationend', () => {danmu.remove();});return danmu;}// 发送弹幕function sendDanmu() {const text = danmuInput.value.trim();if (!text) return;const danmu = createDanmu(text);danmuContainer.appendChild(danmu);danmuInput.value = '';}// 事件监听sendBtn.addEventListener('click', sendDanmu);danmuInput.addEventListener('keypress', (e) => {if (e.key === 'Enter') sendDanmu();});// 控制面板切换let isPanelVisible = true;toggleBtn.addEventListener('click', () => {isPanelVisible = !isPanelVisible;controlPanel.classList.toggle('hidden', !isPanelVisible);toggleBtn.textContent = isPanelVisible ? '▲' : '▼';});// 初始示例弹幕setTimeout(() => {['Hello World!', '这是一个弹幕示例', '可以输入文字试试', '点击箭头收起面板'].forEach(text => {danmuContainer.appendChild(createDanmu(text));});}, 500);

视频

8