<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CS:GO地图视频展示</title>
<style>
:root {
--csgo-orange: #f7931e;
--csgo-dark: #1a1a1a;
--csgo-darker: #0d0d0d;
--csgo-light: #e6e6e6;
--csgo-accent: #4d4d4d;
--csgo-highlight: rgba
(247, 147, 30, 0.3
);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var
(--csgo-dark
);
color: var
(--csgo-light
);
min-height: 100vh;
display: flex;
}
/* 侧边栏样式 */
.sidebar {
width: 260px;
background: linear-gradient
(to bottom, #0d0d0d, #1a1a1a
);
padding: 20px 0;
box-shadow: 5px 0 15px rgba
(0,0,0,0.5
);
display: flex;
flex-direction: column;
z-index: 10;
}
.sidebar-header {
padding: 0 20px 20px;
border-bottom: 1px solid var
(--csgo-accent
);
margin-bottom: 20px;
}
.sidebar h1 {
color: white;
background-color: var
(--csgo-orange
);
font-size: 22px;
text-transform: uppercase;
padding: 15px;
letter-spacing: 2px;
margin-bottom: 20px;
text-align: center;
border-radius: 4px;
box-shadow: 0 4px 8px rgba
(0,0,0,0.4
);
}
.sidebar ul {
list-style-type: none;
padding: 0 15px;
overflow-y: auto;
flex: 1;
}
.sidebar li {
padding: 14px 15px;
margin-bottom: 8px;
cursor: pointer;
color: var
(--csgo-light
);
background: rgba
(77, 77, 77, 0.2
);
border-left: 3px solid transparent;
transition: all 0.3s ease;
font-weight: 600;
letter-spacing: 0.5px;
border-radius: 3px;
display: flex;
align-items: center;
}
.sidebar li i {
margin-right: 10px;
color: var
(--csgo-orange
);
}
.sidebar li:hover {
background: rgba
(77, 77, 77, 0.5
);
border-left: 3px solid var
(--csgo-orange
);
transform: translateX
(5px
);
}
.sidebar li.active {
background: var
(--csgo-highlight
);
border-left: 3px solid var
(--csgo-orange
);
color: var
(--csgo-orange
);
}
/* 主内容区样式 */
.main-content {
flex: 1;
/* padding: 0px; */
display: flex;
flex-direction: column;
height: 100vh;
}
.map-container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background: rgba
(0,0,0,0.3
);
border-radius: 8px;
padding: 15px;
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.map-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url
('https://www.esports.net/wp-content/uploads/2020/04/csgo-best-maps.jpg'
) center/cover;
opacity: 0.1;
z-index: -1;
}
#map-video {
width: 57%;
height: 100%;
box-shadow: 0 0 30px rgba
(0,0,0,0.7
);
border: 3px solid var
(--csgo-accent
);
outline: 2px solid var
(--csgo-orange
);
border-radius: 4px;
background: #000;
}
.map-info {
margin-top: 0px;
margin-bottom: 5px;
padding: 20px;
background: rgba
(77, 77, 77, 0.2
);
border-radius: 8px;
}
.map-info h2 {
color: var
(--csgo-orange
);
margin-bottom: 10px;
display: flex;
align-items: center;
}
.map-info h2 i {
margin-right: 10px;
}
.map-info p {
line-height: 1.6;
color: #ccc;
}
/* 响应式设计 */
@media
(max-width: 1000px
) {
body {
flex-direction: column;
}
.sidebar {
width: 100%;
padding: 10px 0;
}
.sidebar ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.sidebar li {
width: 45%;
margin: 5px;
}
.main-content {
padding: 15px;
}
#map-video {
max-height: 50vh;
}
}
@media
(max-width: 480px
) {
.sidebar li {
width: 100%;
margin: 5px 0;
}
.map-container {
padding: 10px;
}
.map-info {
padding: 15px;
}
}
/* 加载指示器 */
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate
(-50%, -50%
);
color: var
(--csgo-orange
);
font-size: 24px;
display: none;
}
</style>
</head>
<body>
<!-- 侧边栏 -->
<div class="sidebar">
<div class="sidebar-header">
<h1>地图选择</h1>
</div>
<ul>
<li class="active" data-map="荒漠迷城">
<i class="fas fa-map"></i> 荒漠迷城
</li>
<li data-map="死亡游乐园">
<i class="fas fa-map"></i> 死亡游乐园
</li>
<li data-map="殒命大厦">
<i class="fas fa-map"></i> 殒命大厦
</li>
<li data-map="远古遗迹">
<i class="fas fa-map"></i> 远古遗迹
</li>
<li data-map="炼狱小镇">
<i class="fas fa-map"></i> 炼狱小镇
</li>
<li data-map="核子危机">
<i class="fas fa-map"></i> 核子危机
</li>
<li data-map="阿努比斯">
<i class="fas fa-map"></i> 阿努比斯
</li>
<li data-map="炙热沙城II">
<i class="fas fa-map"></i> 炙热沙城 II
</li>
</ul>
</div>
<!-- 主内容区 -->
<div class="main-content">
<div class="map-container">
<div class="loading">
<i class="fas fa-spinner fa-spin"></i> 加载中...
</div>
<video id="map-video" controls autoplay muted>
<!-- 初始视频源 -->
<source src="https://assets.codepen.io/4175254/csgo_mirage.mp4" type="video/mp4">
您的浏览器不支持HTML5视频
</video>
</div>
<div class="map-info">
<h2><i class="fas fa-info-circle"></i> 地图信息</h2>
<p id="map-description">荒漠迷城（Mirage）是《反恐精英：全球攻势》中广受欢迎的地图，以其平衡的设计和多样的战术选择而闻名。地图以中东风格为主题，包含多个关键区域如A点、B点和中路，攻守双方均有多种策略选择。</p>
</div>
</div>
<script>
document.addEventListener
('DOMContentLoaded', function
() {
const mapItems = document.querySelectorAll
('.sidebar li'
);
const videoElement = document.getElementById
('map-video'
);
const loadingIndicator = document.querySelector
('.loading'
);
const mapDescription = document.getElementById
('map-description'
);
// 地图信息描述
const
mapInfo = {
"荒漠迷城": "荒漠迷城（Mirage）是《反恐精英：全球攻势》中广受欢迎的地图，以其平衡的设计和多样的战术选择而闻名。地图以中东风格为主题，包含多个关键区域如A点、B点和中路，攻守双方均有多种策略选择。",
"死亡游乐园": "死亡游乐园（Overpass）以其独特的环境设计和复杂的多层结构而著称。地图设置在柏林的游乐园下方，包含管道、桥梁和游乐设施，为玩家提供多样化的战术选择和高低差战斗。",
"殒命大厦": "殒命大厦（Vertigo）是CS:GO中唯一的高层建筑地图，玩家在摩天大楼的施工区域进行激烈战斗。这张地图的特色是垂直战斗和多层平台，需要玩家有良好的空间感知能力和垂直作战技巧。",
"远古遗迹": "远古遗迹（Ancient）灵感来自玛雅文明，地图设置在丛林中的古代遗迹内。这张地图以其开阔的空间、复杂的路径和视觉上引人入胜的环境设计而受到玩家欢迎，提供多种战术可能性。",
"炼狱小镇": "炼狱小镇（Inferno）是CS系列经典地图，设置在意大利风格的乡村小镇中。地图以香蕉道和小镇广场而闻名，提供近距离激烈战斗的机会，需要团队协作和精准的投掷物使用。",
"核子危机": "核子危机（Nuke）是CS系列中最具标志性的地图之一，设置在核电站内。地图以其独特的双层结构（内部和屋顶）而闻名，需要玩家掌握垂直作战技巧和复杂的战术配合。",
"阿努比斯": "阿努比斯（Anubis）是设置在埃及神庙遗址中的地图，具有独特的视觉风格。地图设计平衡对称，包含多个连接点和通道，为玩家提供多样化的战术选择和策略执行机会。",
"炙热沙城II": "炙热沙城II（Dust II）是CS系列中最具标志性和最受欢迎的地图。这张沙漠风格的地图具有简单而高效的布局，包含中路、A点和B点等关键区域，以其快节奏和高技巧性而闻名全球。"
};
// 视频文件映射（实际应用中应为真实视频路径）
const videoSources = {
"荒漠迷城":"img/荒漠迷城.mp4",
"死亡游乐园": "https://assets.codepen.io/4175254/csgo_overpass.mp4",
"殒命大厦": "https://assets.codepen.io/4175254/csgo_vertigo.mp4",
"远古遗迹": "https://assets.codepen.io/4175254/csgo_ancient.mp4",
"炼狱小镇": "https://assets.codepen.io/4175254/csgo_inferno.mp4",
"核子危机": "https://assets.codepen.io/4175254/csgo_nuke.mp4",
"阿努比斯": "https://assets.codepen.io/4175254/csgo_anubis.mp4",
"炙热沙城II": "https://assets.codepen.io/4175254/csgo_dust2.mp4"
};
// 切换地图函数
function switchMap
(mapName
) {
// 显示加载指示器
loadingIndicator.style.display = 'block';
// 更新地图描述
if
(mapInfo[mapName]
) {
mapDescription.textContent =
mapInfo[mapName];
}
// 更新视频源
const videoSrc = videoSources[mapName];
if
(videoSrc
) {
videoElement.src = videoSrc;
// 使用canplaythrough事件检测视频是否准备好
videoElement.oncanplaythrough = function
() {
loadingIndicator.style.display = 'none';
videoElement.play
().catch
(e => {
console.log
('自动播放被阻止，用户需要手动开始播放'
);
}
);
};
// 处理视频加载错误
videoElement.onerror = function
() {
loadingIndicator.style.display = 'none';
alert
(`无法加载地图视频: ${mapName}`
);
};
}
}
// 为每个地图项添加点击事件
mapItems.forEach
(item => {
item.addEventListener
('click', function
() {
// 移除所有active类
mapItems.forEach
(i => i.classList.remove
('active'
));
// 为当前点击项添加active类
this.classList.add
('active'
);
// 获取地图名称
const mapName = this.dataset.map;
// 切换地图
switchMap
(mapName
);
}
);
}
);
// 初始加载第一个地图
switchMap
('荒漠迷城'
);
// 处理视频加载状态
videoElement.addEventListener
('waiting',
() => {
loadingIndicator.style.display = 'block';
}
);
videoElement.addEventListener
('playing',
() => {
loadingIndicator.style.display = 'none';
}
);
}
);
</script>
</body>
</html>
把左边栏右移跟视频只有1px距离
MapInfo Corporation是一家全球性的软件公司，专注于信息可视化技术。提供基于位置信息的软件产品、集成方案及咨询服务。其产品已被广泛应用于政府、军事、电信等多个领域。
扫一扫
3322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
