pc端项目总结

这个星期做了一个简单的PC项目，在这个项目也遇到很多的问题，考察了对css3的动画，canvas，还有对js掌握程度，自己也对此进行一些的总结

一 项目骨架

对HTML5新增的语义化标签进行应用，

	<header></header>
	<nav></nav>
	<section></section>
	<footer></footer>

HTML5可以让很多更语义化结构化的代码标签代替大量的无意义的div标签
这种语义化的特性提升了网页的质量和语义
流体布局
网页缩小和放大时网页布局会随着浏览器的大小而改变
固定布局
固定宽度布局的设计不会因为用户扩大或缩小浏览器窗口而发生变化

布局思路：首先分为头部和内容区，头部的话又分为logo，导航栏，和下标箭头，
内容区：因为涉及到滑屏，所以一个ul容器包含五个li来布局，对里进行定位，
然后对每一屏分别进行设置，

二 项目内容设计

第一屏

这屏是一个3d的轮播，

手动轮播（事件驱动）
小圆点的切换
class不能完全覆盖，classlist的形式A区操作它
for循环内部添加事件
将所有小圆点的active remove掉
给当前触发点击事件的小圆点add active(this)
判断方向(在最外层循环时,将i绑给每个小圆点的index属性;点击事件逻辑的最后将this.index赋给oldindex)
从左往右（this.index > oldindex）
对动画的切换
从右向左（this.index < oldindex）
对动画的切换

自动轮播（定时器驱动）
函数包裹循环定时器(方便重新开启);在函数的第一行清除定时器
自动轮播只有一个方向;无缝
this.index替换成一个会自动加1的变量 autoindex;逻辑的最后将autoindex赋给oldindex
无缝的实现就是一个if判断，判断 autoindex的取值范围
从左往右（this.index > oldindex）
对动画的切换

第二屏
这一屏主要是对css3的transform的运用，需要搭建一个3d舞台，
搞清文字的那一面的正面，背景图的是反面

第二屏
用animation动画来达到效果，

@keyframes works3Move{
            0%{
                transform: translateX(0px) rotateY(0deg);
            }
            49%{
                transform: translateX(-490px) rotateY(0deg);
            }
            50%{
                transform: translateX(-500px) rotateY(180deg);
            }
            100%{
                transform: translateX(0px) rotateY(180deg);
            }
        }

第四屏
这一屏考察图片的定位，实现图片的炸裂效果

第五屏
canvas的运用
事件的绑定和同步代码与异步代码的执行
JavaScript是一门单线程的语言，单线程意味着，如果在同个时间有多个任务的话，这些任务就需要进行排队，前一个任务执行完，才会执行下一个任务
网站的渲染过程，比如元素的渲染，其实就是一个同步任务

异步任务是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程，当我们打开网站时，像图片的加载，音乐的加载，其实就是一个异步任务

最后这个项目有一个开机动画，原理就是在最外层放一个遮罩层，进度条随数据加载变化，当数据加载完成时，将遮罩层清除掉，如果不清除，会影响html结构
会造成影响