黑马程序员技术交流社区

标题: 【郑州校区】前端与移动开发项目一 [打印本页]

---

作者: 谷粒姐姐    时间: 2018-11-22 11:00
标题: 【郑州校区】前端与移动开发项目一


购物网站宣传页面

案例目的：

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

fullpage 全屏插件

全屏滚动效果，原生js也很好实现，主要是用 mousewheel  鼠标滚轮滚动事件， 来判断上滚动还是下滚动，之后设置每次滚动的高度为屏幕的高度即可。但是，虽然效果简单，但是兼容性很差，要做很多兼容处理及比较麻烦啦！（了解一下，有兴趣的同学可以研究一下）

fullPage.js 是一个基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。

github 官网     https://github.com/alvarotrigo/fullPage.js  

中文演示地址   http://www.dowebok.com/demo/2014/77/   

主要功能有：

支持鼠标滚动

支持前进后退和键盘控制

多个回调函数

支持手机、平板触摸事件

支持 CSS3 动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

引用文件

[AppleScript] 纯文本查看 复制代码

<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 结构

[AppleScript] 纯文本查看 复制代码

<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入口函数

[AppleScript] 纯文本查看 复制代码

$(function(){

    $('#fullpage').fullpage();

});

fullpage 详细参数

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2