为了账号安全,请及时绑定邮箱和手机立即绑定
简介:在网页中传统的照片查看一直是网格-列表,现在我们可以突破这种限制,获得和现实中一样的自由。随意摆放的照片,超酷的切换动画;还能翻开照片,查看图片简介。 本课程主要有两个部分;前半部分以原理分析和前端界面实现为主,后半部分则是脚本来处理的一些特效与总结。

1章 前期准备

介绍了这个案例在现实生活中的原型,以及在其他的应用程序中的应用,同时还介绍了一种通用的分析方法,从 “VCD” 的角度去分析一个案例的实现。

2章 前端界面

介绍了特效的源码结构,以及所需的素材。接着根据前期准备中介绍的 “V”(VIEW),把案例中所需要的界面素材全部编写出来。其中用 CSS 编写了大部分的视觉效果,以及对应特效的基本动作。并且通过浏览器开发工具,用手动切换的方式验证了3D切换的视觉动作特效。

3章 JS脚本编写

介绍了这个案例中的“D”(DATA)数据部分,同时通过改造之前的 VIEW,通过一个函数把所有的海报的 HTML 通过脚本的形式生成并输出。然后通过一个随机数的算法,随机选中一个海报作为当前选中展现的海报。再接着通过计算左右分区的范围,把剩余的海报的位置和角度也随机分配了出去。最后结合“前端界面”部分中的翻转控制,完整实现了控制按钮的输出、翻转控制、以及自身的翻转特效。

4章 优化与总结

介绍了通过一些简单的样式调整,使得整个特效的动作更加流畅,然后讲解了如何去兼容Firefox浏览器,接着给出了一些思考,如何调整切换动画。最后对案例中用到的特殊 CSS 以及 JS 中的一些特别的方法进行了总结。
课程须知
1、了解标签的用法,图片资源的引用 2、了解选择符的概念,以及基本的样式属性作用(宽、高等) 3、了解函数的调用,了解 DOM 元素的获取及其属性的读写 4、对程序的基本概念已经掌握,如变量,流程控制(条件,循环)
老师告诉你能学到什么?
1、方法论:VCD 分解法 2、平面旋转、3D旋转、样式过度动画 3、如何用 JS+HTML 实现最简单的模板功能 4、简单的id,class DOM选择器 实现 5、JS 算法:范围内随机数生成 6、数组、DOM 元素集合的遍历 7、FF 和 Chrome 样式兼容的方法
意见反馈 常见问题 APP下载
官方微信