喜马拉雅官网（html+css+js）

所有内容全部原创均为自己敲出来的，根据喜马拉雅官网网页编写，使用html+css+js，实现页面所有基本样式以及动画效果，布局和页面样式与官网相同，图片和内容均来自官网。

一．项目介绍：

1. 项目需求分析该项目

选择喜马拉雅官网作为 WEB 前端基础课程大作业的项目，主要原因是喜马拉雅官网具有以

下几个特点：

界面设计美观：喜马拉雅官网的界面设计简洁、美观，能够吸引用户的注意力，这对于

前端开发者来说是一个很好的学习对象。

用户体验良好：喜马拉雅官网的用户体验良好，用户可以轻松地找到自己需要的内容，

这对于前端开发者来说是一个很好的学习目标。

功能丰富：喜马拉雅官网的功能丰富，对于前端开发者来说是一个很好的学习内容

2. 项目功能分析

主要分为四个其区域，头部、主页、内容、底部。

其中头部包含 logo 、 nav 、搜索框、相关内容以及用户，其中 nav 使用了二级菜单，绝对定

位到头部的下面，再使 transform: translateY 的值为负值，即平时让该区域放在屏幕上部，且完

全隐藏在网页外，当鼠标划过时，使其值变为 0 。 nav 区域还使用了小滑块，通过绝对定位和

transform 定 位 到 li 下 面 ， 添 加 鼠 标 监 听 事 件 ， 当 鼠 标 划 过 时 使 当 前 的 transform =

`translateX(${e.target.offsetLeft}px)` ，即使当前的横向位移变成距离做边的距离。相关内容以及

用户都使用了字体图标，其中给相关内容中的第一个添加 hover 效果，使其划过时再在其下面

显示一个块，给里面的每个 li 添加 data-id 的值，添加监听事件，通过判断当前 id 值修改其中

的图片。

主页包含轮播图和导航信息，以及猜你喜欢和下载，轮播图区域共三张图片，通过当前 i

值修改路径，并在左右添加左右换图按钮，并添加点击事件。在下载区域添加背景图和径向线

性渐变来优化显示效果。

内容有分类信息（标题和左右两个内容区域）和排行榜，左边是两行共十个有声书信息，

其中图片添加了半透明背景色和背景图，平时让透明度变为 0 ，当划过时透明度变为 1 并且让

图片缩放是效果更优美，右边是三个有图的图书信息和文字信息。排行榜添加了各种样式来美

化界面。

底部包含相关信息和版权信息，调整图片字体等多种效果，使其美观整洁。

3. 项目最终效果展示

展示

二．项目实现方法：

1. header 区

头部包含 logo、nav、搜索框、相关内容以及用户，其中 nav 使用了二级菜单，绝对定位到头部的下面，再使 transform: translateY 的值为负值，即平时让该区域放在屏幕上部，且完全隐藏在网页外，当鼠标划过时，使其值变为 0。nav 区域还使用了小滑块，通过绝对定位和 transform定 位 到 li  下 面 ， 添 加 鼠 标 监 听 事 件 ， 当 鼠 标 划 过 时 使 当 前 的 transform  = `translateX(${e.target.offsetLeft}px)`，即使当前的横向位移变成距离做边的距离。相关内容以及用户都使用了字体图标，其中给相关内容中的第一个添加 hover 效果，使其划过时再在其下面显示一个块，给里面的每个 li 添加 data-id 的值，添加监听事件，通过判断当前 id 值修改其中的图片。

2. 主页区

主页包含轮播图和导航信息，以及猜你喜欢和下载，轮播图区域共三张图片，通过当前 i值修改路径，并在左右添加左右换图按钮，并添加点击事件。在下载区域添加背景图和径向线性渐变来优化显示效果。

3. 内容区

内容有分类信息（标题和左右两个内容区域）和排行榜，左边是两行共十个有声书信息，其中图片添加了半透明背景色和背景图，平时让透明度变为 0，当划过时透明度变为 1 并且让图片缩放是效果更优美，右边是三个有图的图书信息和文字信息。排行榜添加了各种样式来美化界面。

4. Footer 区

底部包含相关信息和版权信息，调整图片字体等多种效果，使其美观整洁。