JavaScript网页设计案例：互动式简历网站

在现代网页设计中，JavaScript 是实现交互和动态效果的关键技术。本文将通过一个完整的案例，展示如何使用 JavaScript 构建一个交互式的个人简历网页。本文不仅会涵盖 HTML 和 CSS 的使用，还会详细介绍如何利用 JavaScript 实现丰富的用户交互功能，如导航切换、动态加载内容、滚动动画等。
在这里插入图片描述

一、项目概述

本项目是一个互动式简历网站，它包含以下功能：

动态导航菜单：点击导航时页面会平滑滚动到对应的部分。
动态内容加载：点击按钮后，展示更多关于个人信息的详细内容。
动画效果：页面加载时内容淡入、滚动时元素渐入，增加用户体验。

二、项目结构

首先，我们需要定义项目的基本结构。为了简洁，项目文件可以包括：

index.html：主页面文件，定义网页的结构。
style.css：CSS 文件，包含页面的样式和布局。
script.js：JavaScript 文件，实现交互效果。

1. HTML 页面结构

以下是 HTML 页面结构的示例，包括头部、个人简介、技能展示、项目经验、联系信息等常见的简历部分。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Interactive Resume</title><link rel="stylesheet" href="style.css">
</head>
<body><!-- 导航栏 --><nav id="navbar"><ul><li><a href="#home">Home</a></li><li><a href="#about">About</a></li><li><a href="#skills">Skills</a></li><li><a href="#projects">Projects</a></li><li><a href="#contact">Contact</a></li></ul></nav><!-- 首页部分 --><section id="home"><h1>Welcome to My Resume</h1><p>Hi, I'm a web developer with a passion for creating interactive web experiences.</p></section><!-- 关于我部分 --><section id="about"><h2>About Me</h2><p>I'm a web developer with over 5 years of experience...</p><button id="more-info-btn">More Info</button><div id="more-info" style="display: none;"><p>Here is some additional information about my background and experience...</p></div></section><!-- 技能部分 --><section id="skills"><h2>Skills</h2><ul><li>JavaScript</li><li>HTML & CSS</li><li>React.js</li><li>Node.js</li></ul></section><!-- 项目部分 --><section id="projects"><h2>Projects</h2><div class="project"><h3>Project 1: Interactive Webpage</h3><p>Built a dynamic webpage using JavaScript, HTML, and CSS...</p></div><div class="project"><h3>Project 2: E-commerce Site</h3><p>Developed a fully functional e-commerce site using React and Node.js...</p></div></section><!-- 联系方式部分 --><section id="contact"><h2>Contact Me</h2><p>Email: example@example.com</p><p>Phone: 123-456-7890</p></section><script src="script.js"></script>
</body>
</html>

2. CSS 样式

接下来，我们来定义页面的样式。我们会使用基础的 CSS 来定义页面的布局，并为导航栏、各个部分添加样式。

/* 全局样式 */
body {font-family: Arial, sans-serif;line-height: 1.6;margin: 0;padding: 0;background-color: #f4f4f4;
}/* 导航栏样式 */
#navbar {background-color: #333;color: #fff;padding: 1rem;position: fixed;top: 0;width: 100%;display: flex;justify-content: center;z-index: 1000;
}#navbar ul {list-style: none;margin: 0;padding: 0;display: flex;
}#navbar ul li {margin: 0 15px;
}#navbar ul li a {color: #fff;text-decoration: none;padding: 10px 15px;display: inline-block;
}#navbar ul li a:hover {background-color: #555;border-radius: 5px;
}/* 部分样式 */
section {padding: 60px 20px;margin-top: 60px;
}#home {background-color: #00aaff;color: #fff;text-align: center;
}#about, #skills, #projects, #contact {background-color: #fff;margin: 20px 0;
}button {padding: 10px 20px;background-color: #333;color: white;border: none;cursor: pointer;border-radius: 5px;
}button:hover {background-color: #555;
}/* 动画 */
.fade-in {opacity: 0;transition: opacity 1s ease-in;
}.fade-in.show {opacity: 1;
}

3. JavaScript 动态效果

为了实现交互效果，我们将使用 JavaScript 来控制页面滚动、动态加载内容以及添加一些简单的动画效果。

// script.js// Smooth scroll for navigation links
document.querySelectorAll('#navbar a').forEach(link => {link.addEventListener('click', function(e) {e.preventDefault();const targetId = this.getAttribute('href').substring(1);const targetSection = document.getElementById(targetId);window.scrollTo({top: targetSection.offsetTop - 50, // Subtract height of navbarbehavior: 'smooth'});});
});// Toggle additional information in About section
const moreInfoBtn = document.getElementById('more-info-btn');
const moreInfoDiv = document.getElementById('more-info');moreInfoBtn.addEventListener('click', function() {if (moreInfoDiv.style.display === 'none') {moreInfoDiv.style.display = 'block';} else {moreInfoDiv.style.display = 'none';}
});// Fade-in effect when sections come into view
const sections = document.querySelectorAll('section');
const options = {threshold: 0.5
};const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {entry.target.classList.add('show');}});
}, options);sections.forEach(section => {section.classList.add('fade-in');observer.observe(section);
});