Skip to content

rainzl/rainzl.github.io

Repository files navigation

rainzl.github.io

-项目说明-

项目名称: 张兵军个人网站

开发环境: Hbuilder

运行环境: Chrome、Firefox、Edge、pad、移动端

运用技术: JavaScript、jQuery、Html5、CSS3、media、web优化(CDN)

开发周期: 28天

技术描述:

主页面使用jQuery开发,其他页面使用原生javascript进行开发;
页面中的轮播图以及屏幕拖动是用原生封装的小组件,在assembly.js中;
开发中用到的js文件: 
	1. 运动函数->move.js
	2. 工具函数->tools.js
	3. 组件库->assembly.js
	4. canvas画图函数->drawCanvas.js
	5. 主要逻辑调用->index.js
	6. 页面中用的数据->data.js
web优化方面:
	1. 减少资源加载次数
	2. 将资源放在CDN上

项目描述:

本网站分为四个主要展示页面
	1. 主要作品页,交互点:
		1) 轮播图(支持左右切换,点击小标切换,移动端滑屏切换)
		2) 点击图片任意部位,弹出项目简介,同上上下canvas运动(再次点击或者切换图片,恢复原状)
		3) 项目简介上的按钮是打开项目的链接
		4) 作品包括:百度云盘、京东首页(移动端)、Luckis(响应式)、音频播放网站(小组项目)

	2. html+小效果集合页,交互点:
		1) 响应式布局
		2) pc端:鼠标移入遮罩层运动,点击跳转到对应html的链接; 移动端:没有做移入移出的遮罩效果 
		3) pc端:滚轮滚轮查看列表内容; 移动端:touch滑屏查看列表内容
		4) 作品包括:qq绿钻(整站并且有完整的js效果)、网易云音乐首页、中视卫视电视节目有限责任公司(整站)、2011春夏国际时装周、
			贪吃蛇游戏、迅雷产品中心、图片裁切、点击图片爆炸、文字查找和替换、文字搬运工、react框架留言板、正则-信息验证、
			图片预加载、旋转轮播图、表格数据增删查、响应式的canvas时钟

	3. 个人介绍页
		打字的方式显示出我的简介,点击按钮,跳转到个人介绍的页面(移动端的效果更好)

	4. 联系方式以及留言页

页面切换方式: 点击左上角的菜单按钮(点击对象的页面); 点击底部的导航图标
在ie浏览器中会有一个提示更换浏览器的页面

About

myHtml

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published