Flash 时代的头部图片通常有以下几种经典效果，我们可以用纯 JavaScript 和 CSS 来一一实现：
（图片来源网络，侵删）
- 全屏大图轮播：一张图片全屏展示，几秒后自动切换到下一张,通常带有淡入淡出或滑动效果。
- 视差滚动背景：当用户向下滚动页面时，背景图片的移动速度比页面内容慢，创造出一种立体、深邃的视觉效果。
- 动态交互背景：鼠标移动时，图片中的某个元素（如人物、产品）会跟随鼠标产生轻微的位移,增加互动性。
下面我将为您提供这三种效果的详细代码实现，从简单到复杂,并附上详细的解释。
准备工作：HTML 和 CSS 基础结构
我们需要一个基础的 HTML 结构和一些 CSS 样式,这个结构将作为我们所有效果的容器。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">JS 头部图片效果</title>
<style>
/* 基础重置和样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
color: #fff;
}
/* 头部容器 - 所有效果都将应用在这里 */
.hero-section {
/* 关键：设置相对定位，并指定高度 */
position: relative;
height: 100vh; /* 视口高度，保证全屏 */
overflow: hidden; /* 防止内容溢出 */
}
/* 用于轮播的图片容器 */
.slideshow-container {
position: relative;
width: 100%;
height: 100%;
}
/* 轮播图片本身 */
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; /* 默认隐藏，通过JS控制显示 */
transition: opacity 1.5s ease-in-out; /* 平滑的淡入淡出效果 */
background-size: cover;
background-position: center;
}
/* 当前显示的轮播图片 */
.slide.active {
opacity: 1;
}
/* 用于视差和交互效果的图片 */
.parallax-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120%; /* 比视口高，为视差效果做准备 */
background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80'); /* 替换成你的图片 */
background-size: cover;
background-position: center;
will-change: transform; /* 优化性能，告诉浏览器这个元素会变化 */
}
/* 内容覆盖层，确保文字清晰可读 */
.hero-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10; /* 确保内容在图片之上 */
}
.hero-content h1 {
font-size: 4rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
.hero-content p {
font-size: 1.5rem;
text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}
/* 轮播指示器（小圆点） */
.dots-container {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.dot {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: background-color 0.3s ease;
}
.dot.active {
background-color: #fff;
}
</style>
</head>
<body>
<!-- 效果 1: 轮播图 (注释掉其他效果来测试这个) -->
<!--
<div class="hero-section">
<div class="slideshow-container">
<div class="slide active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div>
<div class="slide" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div>
<div class="slide" style="background-image: url('https://images.unsplash.com/photo-1543857778-c4a1a569e7bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div>
</div>
<div class="hero-content">
<h1>欢迎来到未来</h1>
<p>探索无限可能</p>
</div>
<div class="dots-container">
<span class="dot active" data-index="0"></span>
<span class="dot" data-index="1"></span>
<span class="dot" data-index="2"></span>
</div>
</div>
-->
<!-- 效果 2: 视差滚动 (注释掉其他效果来测试这个) -->
<!--
<div class="hero-section">
<div class="parallax-bg"></div>
<div class="hero-content">
<h1>视差滚动效果</h1>
<p>向下滚动页面查看效果</p>
</div>
</div>
<div style="height: 200vh; background: #333; padding: 50px; color: white;">
<h2>这里是页面内容</h2>
<p>滚动时，你会发现背景图片的移动速度比这段文字慢。</p>
<p>这创造了一种深度感和层次感，就像 Flash 时代的高级网站一样。</p>
</div>
-->
<!-- 效果 3: 鼠标交互 (注释掉其他效果来测试这个) -->
<div class="hero-section">
<div class="parallax-bg"></div>
<div class="hero-content">
<h1>鼠标交互效果</h1>
<p>移动鼠标，感受图片的微妙变化</p>
</div>
</div>
<!-- 引入我们的 JavaScript 代码 -->
<script>
// ========================================
// 效果 1: 全屏图片轮播
// ========================================
function initSlideshow() {
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');
let currentSlide = 0;
const slideInterval = 5000; // 5秒切换一次
function showSlide(index) {
// 移除所有 'active' 类
slides.forEach(slide => slide.classList.remove('active'));
dots.forEach(dot => dot.classList.remove('active'));
// 为当前索引的元素添加 'active' 类
slides[index].classList.add('active');
dots[index].classList.add('active');
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
// 自动播放
let slideTimer = setInterval(nextSlide, slideInterval);
// 点击指示器手动切换
dots.forEach(dot => {
dot.addEventListener('click', () => {
clearInterval(slideTimer); // 停止自动播放
currentSlide = parseInt(dot.getAttribute('data-index'));
showSlide(currentSlide);
// 重新开始自动播放
slideTimer = setInterval(nextSlide, slideInterval);
});
});
}
// ========================================
// 效果 2: 视差滚动
// ========================================
function initParallaxScroll() {
const parallaxBg = document.querySelector('.parallax-bg');
if (!parallaxBg) return; // 如果页面没有这个元素，就什么都不做
window.addEventListener('scroll', () => {
// 获取页面滚动的距离
const scrolled = window.pageYOffset;
// 获取背景图片元素的高度
const parallaxHeight = parallaxBg.offsetHeight;
// 获取视口高度
const windowHeight = window.innerHeight;
// 计算背景图片移动的速度（通常比页面内容慢，例如0.5倍速）
const speed = 0.5;
// 计算背景图片的位置
// 当页面滚动时，背景图片向上移动的距离是 `scrolled * speed`
// 并且只在图片完全滚出视口前生效
const yPos = -(scrolled * speed);
// 应用变换
parallaxBg.style.transform = `translateY(${yPos}px)`;
});
}
// ========================================
// 效果 3: 鼠标交互
// ========================================
function initMouseInteraction() {
const heroSection = document.querySelector('.hero-section');
const parallaxBg = document.querySelector('.parallax-bg');
if (!heroSection || !parallaxBg) return;
// 鼠标在 hero 区域内的位置 (0 到 1)
let mouseXPercent = 0.5;
let mouseYPercent = 0.5;
heroSection.addEventListener('mousemove', (e) => {
// 获取 hero 区域的尺寸和位置
const rect = heroSection.getBoundingClientRect();
// 计算鼠标在区域内的相对位置 (0 到 1)
mouseXPercent = (e.clientX - rect.left) / rect.width;
mouseYPercent = (e.clientY - rect.top) / rect.height;
});
function animateBackground() {
// 根据鼠标位置计算背景图片的偏移量
// 我们让图片向鼠标移动的反方向移动，产生“视差”感
const moveX = (mouseXPercent - 0.5) * 20; // 20px 是最大移动距离
const moveY = (mouseYPercent - 0.5) * 20;
// 应用变换
parallaxBg.style.transform = `translate(${moveX}px, ${moveY}px)`;
// 使用 requestAnimationFrame 来创建平滑的动画循环
requestAnimationFrame(animateBackground);
}
// 启动动画
animateBackground();
}
// ========================================
// 主函数：根据页面内容初始化对应的效果
// ========================================
document.addEventListener('DOMContentLoaded', () => {
// 检查页面是否有轮播图的元素，有则初始化
if (document.querySelector('.slideshow-container')) {
initSlideshow();
}
// 检查页面是否有视差背景的元素，有则初始化
if (document.querySelector('.parallax-bg')) {
// 视差滚动和鼠标交互都作用于同一个元素，所以可以同时初始化
initParallaxScroll();
initMouseInteraction();
}
});
</script>
</body>
</html>
如何使用和自定义代码
-
选择效果：
- 轮播图：取消注释 HTML 中
<!-- 效果 1: ... -->部分的代码。 - 视差滚动：取消注释 HTML 中
<!-- 效果 2: ... -->部分的代码。 - 鼠标交互：取消注释 HTML 中
<!-- 效果 3: ... -->部分的代码。
- 轮播图：取消注释 HTML 中
-
替换图片：
（图片来源网络，侵删）- 找到 CSS 和 HTML 中
background-image: url('...')的地方，将 中的链接替换成你自己的图片 URL。
- 找到 CSS 和 HTML 中
-
自定义样式：
- 在
<style>标签中，你可以修改.hero-content里的文字大小、颜色、阴影等。 - 可以修改
.slide的transition属性来改变切换动画（从opacity改为transform: translateX可以实现滑动效果）。 - 可以修改
slideInterval变量的值来调整轮播图切换的时间间隔。
- 在
代码详解
轮播图 (initSlideshow)
- 核心思路：通过 JavaScript 动态地给
.slide元素添加或移除active类来控制它们的显示和隐藏。 - CSS 技巧：
- 所有
.slide都使用position: absolute堆叠在一起。 opacity: 0让默认的图片隐藏，opacity: 1让图片显示。transition: opacity 1.5s是实现平滑淡入淡出的关键。
- 所有
- JavaScript 逻辑：
setInterval创建一个定时器，每隔slideInterval毫秒就调用nextSlide函数,实现自动轮播。nextSlide函数负责计算下一张图片的索引，并调用showSlide来更新显示。- 点击
.dot时，清除旧的定时器，切换到指定图片，然后重新设置定时器，实现了“点击后重置计时”的逻辑。
视差滚动 (initParallaxScroll)
- 核心思路：监听
window的scroll事件，根据页面滚动的距离,反向移动背景图片的位置。 - CSS 技巧：
.parallax-bg的height设置为120%,确保在滚动时图片有足够的内容可以移动。will-change: transform是一个性能优化，它告诉浏览器这个元素将会发生变化，浏览器会提前做好准备,使动画更流畅。
- JavaScript 逻辑：
window.pageYOffset获取页面垂直滚动的像素值。speed变量（如5）控制背景移动的速度，值越小，移动越慢,视差效果越明显。transform: translateY()用于移动背景图片。
鼠标交互 (initMouseInteraction)
- 核心思路：监听鼠标在头部区域内的移动，计算鼠标位置的百分比，然后根据这个百分比来移动背景图片，产生“跟随”或“反向”的视差效果。
- CSS 技巧：与视差滚动类似，使用
transform来移动图片。 - JavaScript 逻辑：
mousemove事件会频繁触发，我们用它来实时更新mouseXPercent和mouseYPercent。requestAnimationFrame是现代浏览器提供的一个API，用于在浏览器下一次重绘之前执行指定的回调函数，用它来创建动画循环，比setInterval更高效、更流畅,因为它能和浏览器的刷新率同步。- 图片的移动方向与鼠标移动方向相反，这通常能创造出更好的“立体景深”效果。
通过以上代码和解释，您可以轻松地用现代的 JavaScript 技术复刻出经典的 Flash 头部图片效果，并且这些效果在性能和兼容性上都远超 Flash。
（图片来源网络，侵删）
