SaKaYe readme

介绍

这是根据设计稿开发的单页面网站程序，主要作为 SaKaYe 酒店的官网，对外展示。

网站技术

网站技术说明：

• HTML5
• CSS3
• JavaScript
• lazyLoad.js：用于长页面图片的延迟加载
• 百度地图 WebService API

安装教程

1. 将项目克隆到本地

$ git clone https://github.com.cnpmjs.org/JhouXu/sakaye.git

2. 运行

$ cd SaKaYe

# 进入项目文件中，打开运行 index.html 文件即可。

目录结构

SaKaYe
├─ css
│  ├─ commonStyle.css
│  └─ style.css
├─ images
│  ├─ Features
│  ├─ logo素材
│  ├─ Theme
│  ├─ 素材来源
├─ index.html
├─ js
│  ├─ lazyLoad.js
│  └─ script.js
├─ README.md
└─ video

界面效果

• 导航栏与轮播图 界面

• 关于我们 界面

• 视频宣传 界面

• 酒店介绍 界面

• 服务介绍 界面

• 酒店主题 界面

• 实时资讯 界面

• 联系我们 界面

界面交互效果设计

1. 导航栏：根据当前用户鼠标的位置产生交互效果。
2. 实时日期：在轮播图下方，实时显示当前的年份和日期。

3. 快速置顶置底：当用户观看页面到一定程度时，页面右下角会出现一个快速置顶置底的按钮，以便用户快速查找浏览。
4. 表单验证：前端验证用户数据的表单是否符合规则，以不同的颜色效果反馈给用户。

参与贡献

• JhouXu（作者）

关于

• github 仓库地址：https://github.com/JhouXu/sakaye
• github 演示地址：https://jhouxu.github.io/sakaye/
• gitee 仓库地址：https://gitee.com/JhouXu/sakaye
• gitee 演示地址：https://jhouxu.gitee.io/sakaye（受 gitee-page 影响，此链接不能实现视频的观看，如需正常浏览请移步 github 演示地址）

本仓库网站主要通过前端基础知识，进行页面效果的展示，图片、视频等素材均来源于网络，仅供学习使用。谢谢观看。