前端与移动开发项目一

购物网站宣传页面
案例目的：
复习---复习前面学过的HTML5+CSS3
综合---综合运用jquery完成案例
拓展---可以做宣传页面或者个人简历

fullpage 全屏插件
全屏滚动效果，原生js也很好实现，主要是用 mousewheel 鼠标滚轮滚动事件， 来判断上滚动还是下滚动，之后设置每次滚动的高度为屏幕的高度即可。但是，虽然效果简单，但是兼容性很差，要做很多兼容处理及比较麻烦啦！（了解一下，有兴趣的同学可以研究一下）
fullPage.js 是一个基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。
github 官网 https://github.com/alvarotrigo/fullPage.js
中文演示地址 http://www.dowebok.com/demo/2014/77/
主要功能有：
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
引用文件

 

 

HTML 结构


    
第一屏
    
第二屏
    

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


JavaScript入口函数

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

fullpage 详细参数