HTML5购物商城案例

用到的技术：fullpage.js—全屏滚动插件
引用的文件

HTML结构

    
第一屏
    
第二屏
    

        
第三屏的第一屏
        
第三屏的第二屏
        
第三屏的第三屏
        
第三屏的第四屏
    
    
第四屏

入口函数

$(function(){
    $('#fullpage').fullpage();
});

详细参数
注意点：
1、$(’#fullpage’).fullpage({
navigation: true,
回调函数
})
注意传入的是json对象格式，要用逗号隔开
navigation 是字符串格式。注意格式！！
scrollingSpeed：700，值越大，越慢，可以理解为：滚动一个屏幕所需要的时间。
z-index越大，越在上面
2、有关CSS
（1）修改css样式
根据所要修改的样式，例如：#fp-nav，设置css新样式，在样式最后加上 ！important
设置背景图的规范：先设置颜色，再设置背景图片
（2）水平居中对齐
left：50%
transform：translateX（-50%）—好处：不用计算margin-left的具体值
（3）对于背景半透明
background：rgba（0，0，0，0.3）最后一个值越小，越透明
（4）对于背景图水平居中
background： url（） no-repeat center center；
（5）放两张图片的技巧
设置一个div，div的背景设置为一张图片。
在div中，设置一个img标签，用相对路径定位另一张图。
（6）隐藏的技巧
opacity：0；—因为后面要做淡入淡出的效果，不要用display
（7）背景固定：滚动时，背景不移动
background-attachment:fixed
//详解：
scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。
fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。
local：背景图相对于元素内容固定，
inhert:继承，没什么说的。
3、对于@keyframes 动画名字｛
0%｛ top：25% ｝
50%｛｝
100%｛｝
｝
在css中调用 ： animation ： 动画名字 3s 曲线（linear） infinite；
4、回调函数
afterLoad: function(anchorLink, index)
index：当前的页面索引
onLeave: function(index, nextIndex, direction)
index：当前页面；nextIndex 是滚动到的“页面”的序号
实现效果主要是用回调函数
5、有关jQuery
（1）show函数：某个元素出现，display：block
（2）animate函数
.animate（｛“right”：370｝，1500，function（）｛…｝）
.animate（｛“属性”：值｝，时间（毫秒），回调函数）
（3）获取当前屏幕的高度
var k = $(window).height();
第二屏中沙发的效果：
“大沙发字”移动到“电视”里，然后马上隐藏。
8个沙发显示。
小沙发字显示，向右上角移动。

第三屏中的沙发：
沙发从第二屏掉落后，原来的沙发没了的原理：用一张白色图片盖住
当第二屏幕往第三屏幕滚动的时候， 沙发显示并且往第三屏幕跑 白色盒子显示
走的距离 就是 当前哦屏幕的高度 - main 到底部的高度 - 沙发到main的距离

var flag=true的作用：控制动画，节流阀的作用。
这样写，动画完成时为true，可以减少服务器不必要的负载。

第四屏：