-项目说明-
项目名称: 张兵军个人网站
开发环境: 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浏览器中会有一个提示更换浏览器的页面