妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 6439|回复: 10

妙味JS班实体学员茹博洋课后练习:QQ浏览器

[复制链接]
leo 发表于 2016-7-3 23:50:53 | 显示全部楼层 |阅读模式
就在几天前,有位咨询者问我:
你们的课程里面教不教一些整屏切换的、动画效果比较绚酷的项目?
他说他们公司马上有个展示页面可能要做类似的网站,但他没有什么头绪……

经过一些了解,我发现他也是上了一年多班的前端开发者,
可能工作中仅仅用到HTML+CSS切页面,用JS写一些非常简单的效果,
对整屏切换+动画绚酷的网站究竟会用到何种技术实现,并没有清晰认识。

于是我如实相告:
那些所谓的整屏切换网站,不过是用到了JavaScript课程中级事件的知识点“鼠标滑轮”和窗口尺寸获取,再配合JS课程中的一些运动库(不考虑兼容的话,可以直接使用CSS3动画,再配合CSS3的一些3D属性)即可轻松实现了,JS的程序逻辑并不复杂,任何学员学到JS中级课程,就可以开始独立尝试做这样的项目了……

结果这位哥们依然担心:真的那么简单吗?怎么我感觉很难的样子??

好吧,今天给这位朋友们看一个妙味JS班学员作品,
她仅仅只是使用了CSS3+JS课程中级的知识点,就实现了这样的网站。


妙味JS班实体学员 茹博洋 课后练习:QQ浏览器
4.png 3.png

2.png


1.png




项目地址:http://2013.miaov.com/student/qq_browser/




-项目说明-
-------------------
开发周期:4天
项目名称:仿QQ浏览器的宣传页面
实现功能:
        滚屏:
                通过鼠标滚轮控制屏幕切换。
        首屏:
                循环定时背景播放
                细节:每个浮球改变left值的同时旋转自身的角度
                定时切换皮肤
        第二屏:
                显示47极速引擎
                细节:过渡时旋转背景大图的角度并且将表钟缩放,47图片从远到近有种冲击的感觉
        第三屏:
                位移轻盈简洁的同时将第四屏引出来,第四屏图片旋转角度显示在中间
项目难点:
        过渡时候的细节,比如表钟缩放的时候,既要改变left值也要改变角度还要改变缩放,屏与屏之间的衔接调试时花了些时间。


项目总结:
        这个项目主要应用了CSS3+JS的知识点,素材都是qq浏览器自带的,在整个开发过程中大大的考验了我的耐心,当作品完成时,亲身体会到细节决定成败,细心分析需求,尝试按照自己的思路去做效果,耐心完成项目。
-------------------


如有需要,我们可以再发一些类似这样的JS实体班学员作品出来,供大家交流学习。





如果你想咨询妙味JS课程?你可以找客服妹纸敞开了说、铆足了劲的聊:
咨询QQ:3023710192、3049266712
想听到客服妹纸们的声音?你得拨这个号:010-57269690

客服在线时间:周一至周五 9:30-18:00 周六至周日 10:00-17:00

地址:北京海淀区西二旗辉煌国际大厦(西6号楼)319室






回复

使用道具 举报

玫瑰刺伤指尖。 发表于 2016-7-9 21:11:32 | 显示全部楼层
Alisa0026 发表于 2016-7-8 16:38
老师,就像我也想实现一个很炫酷的效果,但是不知道自己该怎么去弄一个什么样的效果才炫酷才能把所学的东西 ...

建议你先从模拟别人做起,当然了,我说的模仿,是只看他的效果,然后去研究,他是怎么实现的,你用自己的思路去实现,不要看对方的代码.

实在做不下去的时候,可以看下对方的代码,学习一下对方的编程思想.

对于我来说,我经常去昵图网,上面有平面设计师,设计好的版图,我下载下来,然后我用代码去实现.

正好,昵图网对于我来说,充当了我的UI设计师,他设计图纸,我拿图纸,用代码来实现.

其实还是做得少,多练练,做理解理解,想法自然而然就有了.一步一步来,你会成功的.只要不放弃,加油.
回复 支持 1 反对 0

使用道具 举报

玫瑰刺伤指尖。 发表于 2016-7-5 17:42:06 | 显示全部楼层
前排支持了.可能是因为时间比较赶,如果能把细节再调一下的话,就更棒了.完美.

比我上学的时候强百倍啊....加油.
回复 支持 反对

使用道具 举报

cangyue 发表于 2016-7-5 17:53:19 | 显示全部楼层
真棒!

真的那么简单吗?怎么我感觉很难的样子??
回复 支持 反对

使用道具 举报

 楼主| leo 发表于 2016-7-5 23:01:18 | 显示全部楼层
玫瑰刺伤指尖。 发表于 2016-7-5 17:42
前排支持了.可能是因为时间比较赶,如果能把细节再调一下的话,就更棒了.完美.

比我上学的时候强百倍啊.... ...

强百倍夸张了哈~~~现在再让你实现肯定非常容易了吧~
回复 支持 反对

使用道具 举报

 楼主| leo 发表于 2016-7-5 23:01:34 | 显示全部楼层
cangyue 发表于 2016-7-5 17:53
真棒!

真的那么简单吗?怎么我感觉很难的样子??

真心不复杂,只要扎实掌握JS课程到中级部分即可,过两天再发一个出来哈~~
回复 支持 反对

使用道具 举报

Alisa0026 发表于 2016-7-6 22:34:44 | 显示全部楼层
leo 发表于 2016-7-5 23:01
真心不复杂,只要扎实掌握JS课程到中级部分即可,过两天再发一个出来哈~~
...

老师,这些作品都是在课程学习中辅导出来的吗
回复 支持 反对

使用道具 举报

天使的月亮 发表于 2016-7-7 13:51:11 | 显示全部楼层
这个类似效果以前用的是css3+jq写的,遗憾的是思路是抄袭别人的。
回复 支持 反对

使用道具 举报

 楼主| leo 发表于 2016-7-7 22:43:35 | 显示全部楼层
Alisa0026 发表于 2016-7-6 22:34
老师,这些作品都是在课程学习中辅导出来的吗

是学员自己根据学的知识做的作品,讲师并没有要求必须做哈~~兴趣,全凭兴趣~~
回复 支持 反对

使用道具 举报

 楼主| leo 发表于 2016-7-7 22:49:19 | 显示全部楼层
天使的月亮 发表于 2016-7-7 13:51
这个类似效果以前用的是css3+jq写的,遗憾的是思路是抄袭别人的。

有一个职业叫做:“交互动画设计师”——设计师用类似“AE”这样的软件,把脑袋中想的那些交互动画做好之后,导出视频,然后“前端工程师”根据这样的“动画视频”去实现代码即可。公司正规化以后,职业分工会很细,“前端工程师”如果也要求是“交互动画设计师”的话,那并不是件好事,就相当于网站开发中:策划、设计、交互动画设计、前端、后端、测试、运营……统统一个人完成,这也太 ~!@#¥%……&*(*&……%¥#¥%……

所以学了编码,就把技术用于实践,技术只要学以致用即可——从这个层面上来说,“抄袭”的指责谈不上哈~~
回复 支持 反对

使用道具 举报

Alisa0026 发表于 2016-7-8 16:38:48 | 显示全部楼层
老师,就像我也想实现一个很炫酷的效果,但是不知道自己该怎么去弄一个什么样的效果才炫酷才能把所学的东西应用上,因为脑子里面没有一个概念,而且也不知道应该去模仿一些什么。反而感觉有些迷茫了,有一些方法可以让我能够一步一步的去接近这样炫酷的东西嘛
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-1-16 15:49 , Processed in 0.128756 second(s), 26 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表