哈尔的移动城堡 - 前端期末作业设计
项目简介
本项目是一个基于HTML、CSS和JavaScript的动漫主题网站设计，以《哈尔的移动城堡》为主题。项目包含6个页面，每个页面图文搭配合理，简洁明了。通过CSS和JavaScript实现了多种交互效果，包括轮播图、图片跟随鼠标移动、人物小卡片等。适合初学HTML、CSS和JavaScript的同学学习和参考。
功能特点
- 轮播图功能：
- 使用CSS和JavaScript实现了自动切换的轮播图效果，图片能够自动切换展示。
- 图片跟随鼠标移动：
- 当鼠标悬停在图片上时，图片会放大显示，增强了用户的交互体验。
- 人物小卡片：
- 通过CSS创建了人物小卡片，当鼠标悬停在卡片上时，卡片会放大显示。
- 鼠标点击获取图片：
- 使用JavaScript实现了鼠标点击获取图片的功能，并创建了一个填写表单，供用户填写相关信息。
- 弹窗响应：
- 通过JavaScript的
alert函数，在用户提交表单后弹出一个弹窗，向用户展示提交成功的信息。
- 通过JavaScript的
页面结构
本项目一共包含6个页面，每个页面都经过精心设计，图文搭配合理，简洁明了。页面结构如下：
- 首页：展示轮播图和主要内容。
- 人物介绍：展示人物小卡片，鼠标悬停时卡片放大。
- 图片展示：展示图片，鼠标悬停时图片放大。
- 表单填写：提供一个表单供用户填写信息，提交后弹出提示。
- 关于我们：介绍网站的背景和设计理念。
- 联系我们：提供联系方式和反馈表单。
使用说明
- 下载资源：
- 直接下载本仓库的资源文件，解压后即可使用。
- 修改内容：
- 可以根据自己的需求更换内容，修改HTML、CSS和JavaScript代码。
- 学习参考：
- 本实例适合初学HTML、CSS和JavaScript的同学，通过学习本实例可以掌握基本的网页设计和交互效果实现。
联系作者
如果在使用过程中有任何问题或建议，可以直接联系博主，博主会仔细回答你的问题。
版权声明
本项目为开源项目，仅供学习和参考使用，禁止用于商业用途。
希望本项目能够帮助你更好地学习和掌握前端开发技术！