前端与移动开发项目一

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

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

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
 <!-- jquery.easings.min.js 是必须的,用于 easing 参数,也可以使用完整的 jQuery UI 代替 -->
<script src="js/jquery.easings.min.js"></script>
 <script src="js/jquery.fullPage.js"></script>

HTML 结构

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

JavaScript入口函数

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

fullpage 详细参数 

前端与移动开发项目一
前端与移动开发项目一

阅读更多

没有更多推荐了,返回首页