起点大事记 - 515粉丝节

0. js整体代码

通过自执行函数返回两个对象，Common对象主要包含通用的分享代码，QDHISTORY对象(项目逻辑方法)包含页面主要逻辑，诸如init、loading、pagePlay、musicPlay、events(绑定事件)、JS动画等等。在页面前引入后，标签script中调用。

1. 打开页面，第一个就是碰到的就是自动跳转。

代码很简单，只是对屏幕宽度的判断，大于600就显示静态页二维码。

1
2
3
if(document.documentElement.clientWidth > 600) {
  location.replace('pc.html');
}
2. 加载页面

进度条，css中30s增加width动画。js中监听load事件，load事件完成后通过对进度条添加class实现width:100%过渡，修改加载标志。如果30s内加载标志还是未加载，则提示用户，并修改加载标志为失败，及时后面加载完成也不再触发load事件。
预加载，其实也是延迟加载。页面中img标签src属性保存在data-src中，这样就不会下载该图片，之后根据一定条件出发函数将data-src中属性写到src中。可以通过new Image().src='图片地址'提前下载图片。

3. 使用svg sprite && 使用canva

svg和canva虽然已经很久了，但是大量使用的貌似还不是特别多，使用svg和canva可以减少图片的使用，而且更容易添加动画，局限性主要是颜色上的限制。

4. css动画

css动画会在元素display:none和display:block的时候重新开始。一大堆令人眼花的动画，确实需要深厚的功力才能掌握。

5. 还有一些其他的烟雾效果、背景噪点效果，这些详细的移步大神的博客吧。

ps：自己能够写出来吗？ 应该是不行，即使照着临摹，动画的难度感觉也是很大，更别提烟雾、噪点等这些效果了。