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

news2024/11/18 3:44:18

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 navbar
      behavior: '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);
});