<think>我们使用
HTML的<
marquee>标签来实现滚动效果，但注意<
marquee>是过时的标签，现代开发中通常使用CSS动画或JavaScript来实现。不过，既然要求使用<
marquee>，我们就用这个标签来快速实现一个滚动效果，并尽量美化它。
我们将创建一个水平循环滚动的公告栏，并添加一些样式使其看起来更现代。
注意：<
marquee>标签在
HTML5中已废弃，不建议在生产环境中使用，仅用于演示。
以下是代码示例：</think># 使用
MARQUEE标签实现高科技循环滚动框
虽然`<
marquee>`标签在现代Web开发中已被弃用，但根据您的要求，我将展示如何使用这个标签创建一个具有现代视觉效果的高科技滚动框，并添加JavaScript增强功能。
```
html
<!DOCTYPE
html>
<
html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高科技
MARQUEE滚动框</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
}
.scroll-container {
position: relative;
width: 80vw;
max-width: 1000px;
background: rgba(25, 25, 35, 0.8);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 20px;
}
.scroll-header {
padding: 20px;
text-align: center;
background: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin: -20px -20px 20px -20px;
}
.scroll-header h2 {
color: #fff;
font-size: 2rem;
text-transform:
uppercase;
letter-spacing: 3px;
text-shadow: 0 0 10px #00eeff, 0 0 20px #00eeff;
}
.
marquee-container {
display: flex;
overflow: hidden;
height: 300px;
position: relative;
}
marquee {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.
marquee-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 10px;
}
.scroll-item {
flex: 0 0 auto;
width: 250px;
height: 250px;
background: rgba(30, 30, 45, 0.9);
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(100, 217, 255, 0.3);
transition: all 0.3s ease;
}
.scroll-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 238, 255, 0.4);
border-color: rgba(100, 217, 255, 0.8);
}
.item-icon {
font-size: 3.5rem;
margin-bottom: 15px;
color: #00eeff;
text-shadow: 0 0 10px rgba(0, 238, 255, 0.7);
}
.item-title {
color: white;
font-size: 1.3rem;
margin-bottom: 10px;
text-align: center;
font-weight: 600;
}
.item-desc {
color: rgba(255, 255, 255, 0.7);
text-align: center;
font-size: 0.9rem;
line-height: 1.5;
}
.controls {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.control-btn {
background: rgba(0, 238, 255, 0.2);
border: 1px solid rgba(0, 238, 255, 0.4);
color: white;
padding: 10px 20px;
border-radius: 30px;
cursor: pointer;
font-size: 1rem;
transition: all 0.3s ease;
}
.control-btn:hover {
background: rgba(0, 238, 255, 0.4);
box-shadow: 0 0 15px rgba(0, 238, 255, 0.5);
}
/* 响应式设计 */
@media (max-width: 768px) {
.scroll-container {
width: 95vw;
}
.scroll-item {
width: 200px;
height: 200px;
}
marquee {
height: 250px;
}
}
</style>
</head>
<body>
<div class="scroll-container">
<div class="scroll-header">
<h2>科技创新展示</h2>
</div>
<div class="
marquee-container">
<
marquee id="tech
Marquee" direction="
up" scrollamount="2"
behavior="scroll" loop="-1">
<div class="
marquee-content">
<!-- 内容由JavaScript动态生成 -->
</div>
</
marquee>
</div>
<div class="controls">
<button class="control-btn" id="pauseBtn">暂停</button>
<button class="control-btn" id="resumeBtn">继续</button>
<button class="control-btn" id="speed
UpBtn">加速</button>
<button class="control-btn" id="slowDownBtn">减速</button>
<button class="control-btn" id="reverseBtn">反向</button>
</div>
</div>
<script>
// 滚动内容数据
const scrollItems = [
{ icon: "🚀", title: "太空探索", desc: "新一代火箭技术突破地球引力限制" },
{ icon: "🤖", title: "人工智能", desc: "深度学习模型实现人类级自然语言理解" },
{ icon: "💻", title: "量子计算", desc: "量子比特稳定性突破带来计算革命" },
{ icon: "🔋", title: "新能源", desc: "固态电池技术实现充电5分钟续航800公里" },
{ icon: "🧬", title: "基因编辑", desc: "CRISPR技术精准治疗遗传性疾病" },
{ icon: "📡", title: "6G通信", desc: "太赫兹技术实现每秒TB级数据传输" },
{ icon: "🌐", title: "元宇宙", desc: "虚拟与现实融合创造全新数字宇宙" },
{ icon: "🛸", title: "UFO技术", desc: "反重力推进系统研究取得重大进展" },
{ icon: "🧠", title: "脑机接口", desc: "非侵入式脑机接口实现意念控制" },
{ icon: "🔭", title: "深空探测", desc: "新一代望远镜探索宇宙起源奥秘" }
];
const
marquee = document.getElementById('tech
Marquee');
const
marqueeContent = document.querySelector('.
marquee-content');
const pauseBtn = document.getElementById('pauseBtn');
const resumeBtn = document.getElementById('resumeBtn');
const speed
UpBtn = document.getElementById('speed
UpBtn');
const slowDownBtn = document.getElementById('slowDownBtn');
const reverseBtn = document.getElementById('reverseBtn');
// 初始化滚动内容
function initScrollContent() {
marqueeContent.inner
HTML = '';
scrollItems.forEach(item => {
const scrollItem = document.createElement('div');
scrollItem.className = 'scroll-item';
scrollItem.inner
HTML = `
<div class="item-icon">${item.icon}</div>
<div class="item-title">${item.title}</div>
<div class="item-desc">${item.desc}</div>
`;
marqueeContent.appendChild(scrollItem);
});
}
// 控制滚动
function pause
Marquee() {
marquee.stop();
}
function resume
Marquee() {
marquee.start();
}
function speed
Up() {
let currentSpeed = parseInt(
marquee.getAttribute('scrollamount')) || 2;
marquee.setAttribute('scrollamount', Math.min(10, currentSpeed + 1));
}
function slowDown() {
let currentSpeed = parseInt(
marquee.getAttribute('scrollamount')) || 2;
marquee.setAttribute('scrollamount', Math.max(1, currentSpeed - 1));
}
function reverseDirection() {
const currentDirection =
marquee.getAttribute('direction');
const newDirection = currentDirection === '
up' ? 'down' : '
up';
marquee.setAttribute('direction', newDirection);
}
// 事件监听
pauseBtn.addEventListener('click', pause
Marquee);
resumeBtn.addEventListener('click', resume
Marquee);
speed
UpBtn.addEventListener('click', speed
Up);
slowDownBtn.addEventListener('click', slowDown);
reverseBtn.addEventListener('click', reverseDirection);
// 鼠标悬停控制
marquee.addEventListener('mouseenter', pause
Marquee);
marquee.addEventListener('mouseleave', resume
Marquee);
// 初始化
initScrollContent();
</script>
</body>
</
html>
```
## 代码解释
这个实现使用了`<
marquee>`标签创建垂直滚动效果，同时添加了现代CSS样式和JavaScript控制功能：
### 核心结构
1. 使用`<
marquee>`标签作为滚动容器，设置`direction="
up"`实现垂直滚动
2. `scrollamount`属性控制滚动速度
3. `
behavior="scroll"`和`loop="-1"`确保无限循环滚动
### 视觉设计
- **玻璃态效果**：半透明背景配合`backdrop-filter: blur(10px)`实现毛玻璃效果
- **霓虹发光**：文本和边框使用发光效果增强科技感
- **卡片设计**：每个滚动项采用卡片式设计，悬停时有3D浮动效果
- **渐变背景**：使用CSS渐变创建动态背景
### JavaScript增强功能
1. **滚动控制**：
- 暂停/继续功能：使用`
marquee.stop()`和`
marquee.start()`
- 速度控制：通过修改`scrollamount`属性
- 方向反转：动态切换`direction`属性
2. **交互功能**：
- 鼠标悬停时暂停滚动
- 卡片悬停时的3D浮动效果
- 控制按钮的悬停效果
3. **动态内容生成**：
- 使用JavaScript动态创建滚动内容
- 数据驱动的内容管理
### 响应式设计
- 使用媒体查询适配不同屏幕尺寸
- 在移动设备上调整卡片尺寸和滚动区域高度
## 注意事项
虽然这个实现使用了`<
marquee>`标签，但需要注意：
1. `<
marquee>`是
HTML的废弃特性，不再被推荐使用
2. 现代浏览器仍支持该标签，但功能有限
3. 对于生产环境，建议使用CSS动画或JavaScript实现滚动效果
博客展示了HTML中marquee标签的使用，设置了其behavior为alternate，高度、方向、滚动速度等属性，内部嵌套了另一个marquee标签并设置样式，呈现出特定的滚动效果。
扫一扫
1229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
