Skip to content

Latest commit

 

History

History
258 lines (193 loc) · 8.5 KB

README.md

File metadata and controls

258 lines (193 loc) · 8.5 KB
Raw

项目展示

不依赖任何框架、库实现的一个动态展示页面。

遇到的一些坑及总结

说明

1 环境搭建说明

1.1 主要功能点

具体功能要求如下：

1. 关闭顶部通知条

点击顶部通知条中的“X 不再提醒”后，刷新页面不再出现此通知条（使用本地cookie实现）。点击项的hover效果见视觉稿。

2. 关注“网易教育产品部”/ 登录

  • 点击关注按钮：首先判断登录的cookie是否已设置（loginSuc）
  • 如果未设置登录cookie，则弹出登录框，使用给定的用户名和密码（需要表单验证）调用服务器Ajax登录，成功后设置登录cookie
  • 登录成功后，调用关注API，并设置关注成功的cookie（followSuc）
  • 登录后“关注”按钮变成不可点的“已关注”状态。按钮的hover效果见视觉稿

3. 顶部右侧导航及内容区各产品的“了解更多”

点击导航中的“网易公开课”，“网易云课堂”，“中国大学MOOC”，新窗口打开对目的页面，对应的跳转链接如下，点击项的hover效果见视觉稿。点击“了解更多>”的跳转链接及打开方式相同。

4. 轮播图

三张轮播图轮播效果：实现每5s切换图片，图片循环播放；鼠标悬停某张图片，则暂停切换；切换效果使用入场图片500ms淡入的方式。点击后新开窗口打开目的页面，对应的跳转链接如下，

5. 左侧内容区tab切换

点击“产品设计”或“编程语言”tab，实现下方课程内容的更换。tab项的hover及选中效果见视觉稿，tab项对应的课程卡片数据见本文档的数据接口列表

6. 查看课程详情

鼠标悬停“产品设计”或“编程语言”tab下的任意课程卡片，出现浮层显示该课程的课程详情；鼠标离开课程详情浮层，则浮层关闭。课程卡片即详情浮层的效果见视觉稿，课程卡片及详情数据见本文档的数据接口列表

7. 右侧“机构介绍”中的视频介绍

点击“机构介绍”中的整块图片区域，调用浮层播放介绍视频。图片的hover效果见视觉稿，浮层中调用的播放器（不做浏览器兼容,可用html5）及视频内容接口见本文档的数据接口列表

8. 右侧“热门推荐”

实现每次进入或刷新本页面，“热门推荐”模块中，接口返回20门课程数据，默认展示前10门课程，隔5秒更新一门课程，实现滚动更新热门课程的效果。课程数据接口见本文档的数据接口列表

9. 页面布局动态适应

根据浏览器窗口宽度，适应两种视觉布局尺寸。窗口宽度<1205时，使用小屏视觉布局；窗口宽度>=1205时，使用大屏视觉布局。布局示意图见视觉效果

2 前后端交互接口说明

2.1 获取课程列表

说明 参数
请求地址格式 http://study.163.com/webDev/couresByCategory.htm
请求方式 get类型
请求参数 pageNo;
psize;
type;
请求参数说明 当前页码 ;
每页返回数据个数 ;
筛选类型（10：产品设计；20：编程语言） ;
返回 课程列表数据（JSON格式字符串）
返回数据说明 需要显示的字段如下：
{
	"totalCount":80,//返回的数据总数
	"totalPage": 8,//返回的数据总页数
	"pagination": {
		"pageIndex" : 1, //当前页码
		"pageSize" : 10, //每页的数据个数
		"totlePageCount": 1//总页数
     },
 	"list" : [{
 		"id":"967019",//课程ID
		"name":"和秋叶一起学职场技能",//课程名称
		"bigPhotoUrl":"http://img1.ph.126.net/eg62.png",//课程大图
 		"middlePhotoUrl":"http://img1.ph.126.net/eg62.png",//课程中图
 		"smallPhotoUrl":" http://img1.ph.126.net/eg62.png ",//课程小图
 		"provider":"秋叶",//机构发布者
 		"learnerCount":"23",//在学人数
 		"price":"128",//课程价格，0为免费
 		"categoryName":"办公技能",//课程分类
		"description":"适用人群：最适合即将实习、求职、就职的大学生"//课程描述
	}]
}

2.2 右侧“最热排行”

说明 参数
请求地址格式 http://study.163.com/webDev/hotcouresByCategory.htm
请求方式 get类型
请求参数 无
请求参数说明 无
返回 课程列表数据（JSON格式字符串）
返回数据说明 需要显示的字段如下：
[{
	"id":"967019",//课程ID
	"name":"和秋叶一起学职场技能",//课程名称
	"bigPhotoUrl":"http://img1.ph.126.net/eg62.png",//课程大图
	"middlePhotoUrl":"http://img1.ph.126.net/eg62.png",//课程中图
	"smallPhotoUrl":" http://img1.ph.126.net/eg62.png ",//课程小图
	"provider":"秋叶",//机构发布者
	"learnerCount":"23",//在学人数
	"price":"128",//课程价格，0为免费
	"categoryName":"办公技能",//课程分类
	"description":"适用人群：最适合即将实习、求职、就职的大学生"//课程描述
}]

2.3 导航关注

说明 参数
请求地址格式 http://study.163.com/webDev/attention.htm
请求方式 get类型
请求参数 无
请求参数说明 无
返回 1
返回数据说明 正确返回1后设置关注cookie（followSuc）

2.4 用户登录

说明 参数
请求地址格式 http://study.163.com/webDev/login.htm
请求方式 get类型
请求参数 userName;
password;
请求参数说明 固定用户帐号：studyOnline ;
固定用户密码：study.163.com ;
使用Md5加密该用户数据 ;
返回 整型
返回数据说明 1 //匹配用户名密码成功
0 //匹配用户名密码失败

2.5 右侧“机构介绍”视频

说明 参数
请求地址格式 http://mov.bn.netease.com/open-movie/nos/mp4/2014/12/30/SADQ86F5S_shd.mp4

3 要求

3.1 HTML/CSS要求

3.1.1 效果符合要求

按照效果图切图，正确测量大小宽高距离位置等数值，文字边框背景等颜色能正确取色。

3.1.2 兼容性要求

页面兼容IE8+、FF、Chrome，允许圆角、阴影只在高版本浏览器中实现。

3.1.3 HTML结构要求

完善的头部信息，代码缩进，正确使用语义化标签及实体，考虑SEO需要，正确嵌套标签，正确使用标签属性，规范的注释格式。

3.1.4 css样式要求

CSS文件内部规范化分类，分类顺序规范，选择器命名和顺序符合规范，属性的顺序和格式符合规范，Hack符合规范，注释清晰格式规范，合理优化背景图，合理优化选择器，合理缩写属性值。

3.1.5 其他

代码简洁性、通用性、扩展性、可读性、可维护性。

3.2 JS要求

3.2.1 功能要求

按照效果图和上面的功能点完成所有功能

3.2.2 兼容性要求

要求能兼容以下浏览器（可以不考虑跨域问题）

  • Chrome 3+
  • Firefox 3.5+
  • Opera 12+
  • Safari 4+
  • Internet Explorer 8+

3.2.3 编码要求

  1. 本作业要求不使用任何的Js框架
  2. Js代码要求有统一的命名规范（保证在自己写的代码中要做到统一）
  3. Js代码要求整洁、紧凑、可读性好，并保证有四个空格的缩进
  4. Js代码要求注释完整。

3.2.4 时间要求

  1. 三个工作日完成页面制作(细节处理，浏览器统一等)
  2. 七个工作日完成逻辑处理，上传作业。

交互及视觉说明

交互说明

示例图

主页(宽屏)视觉说明

示例图

主页(窄屏)视觉说明

示例图