学员张兵军作品:适配移动端的全屏JS网站

先思考一个实际的开发问题:

  1. 一个全屏切换的 PC 端 JS 网站,怎么做到同时让移动端适配呢?这和 “响应式” 开发有关系吗?
  2. 假如你在面试时被问到这样的问题,你该如何回答?
  3. 若是你刚进公司没几天,被要求去做类似产品,你又该怎样去实施?

你会不会想:

这种全屏都是 JS 交互的网站,又不像普通响应式网站那样静态无交互效果,许多框架也没有现成的解决方案啊??要怎么处理才好??

其实任何的 “组件、框架、库” 只能解决一些通用性问题,但如果产品个性化要求高,那肯定就要大家动动自己的小手,用 JS 来写了。


妙味学员:张兵军 就做了一件这样的作品:

首屏图片是核心作品展示,单击图片即可弹出项目说明,点击 "WEBSITE" 按钮即可访问相应作品:

第二屏(点击正中间居下位置的图标,即可全屏切换)则是在学习期间的作业展示区域,张兵军 做了大量课后练习,因此基础打的非常牢固:

第三屏是个人介绍,以打字机形式展示出来,点击 "RESUME" 按钮可访问 张兵军 个人介绍页面:

第四屏是联系方式:

>> PC端作品在线预览地址

手机端可扫描二维码查看:

-项目说明-

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

妙味优秀学员 张兵军 基本情况

  • 年龄:保密

  • 性别:女,是的,没错!看这里,性别是女生(♀),WEB前端开发的妹纸一枚~

  • 专业技能概括:

    HTML5 \ CSS3 \ 原生JS \ 面向对象开发 \ canvas \ babel \ webpack \ gulp \ angular.js \ Echarts \ Linux \ shell \ MySql \ redis

  • 找工作宣言:

    能够接受加班,能够接受较为现实的工资,唯独不能接受太安逸、没有理想的工作氛围。加入一个积极向上的团队是我的终极梦想!


  • 张兵军 - 联系方式:

  • 手机:17310360285

  • Email:369857686@qq.com


对于这位格外优秀的小女生 张兵军,我再多说一句:

如果你希望研发团队中有位技术根基相当扎实的女生出现、并且还希望她能时不时用技术的方式做出好产品、顺便刺激一下那帮没出息的技术宅男们的话……她就是你要找的人了,速度收囊中,好好珍惜吧!

课程咨询:

  • 咨询QQ:2852509866、2852509867、2852509868
  • 电话:010-57269690

打开微信扫描二维码,关注妙味课堂最新动态:

妙味网友
请登录后留言,请登录注册