fullpage學習和測試

時間  2019-12-05
標籤 fullpage 學習 測試 欄目 JavaScript 简体版
原文   原文鏈接

下面是我學習這門課程後的測試代碼：css

HTML部分：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fullpage使用</title>
    <link rel="stylesheet" href="css/jquery.fullPage.css"/>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>
    <style>
        .menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}
        .menu li { float: left; margin:  0 10px 0 0; font-size: 14px;}
        .menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
        .menu .active a { color: #fff; background-color: #333;}
        body{  font-size:200%;}
        .section{text-align:center;overflow: hidden}
        .s4 p{ margin-left: -200%;transition:1s 0.7s; }/*使s4的p元素隱藏在界面的左邊而且設置過渡 */
 .s4.active p{margin-left: 0}/*使p元素從左邊彈出*/
 .s3 p{ margin-top: -200%;transition:1s 0.7s; }/*使s1的p元素隱藏在界面的下邊而且設置過渡 */
 .s3.active p{margin-top:0;}/*使p元素從下邊彈出
 </style>
    <script>
        $(function(){
            $(".fullpage").fullpage({
                sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],//json形式
 continuousVertical: true,//設置循環
 anchors: ['page1', 'page2', 'page3', 'page4'],//設置錨
 menu: '.menu',//定義上方MENU
 navigation: true,//設置右邊導航欄
//                navigationPosition:"left",//設置導航欄的位於左邊仍是右邊，默認爲右邊
 navigationTooltips:['第一頁','第二頁','第三頁','第四頁']
            });
//            setInterval(function(){
//                $.fn.fullpage.moveSectionDown();
//            }, 3000);//設置頁面自動往下

 });
    </script>
</head>
<body>
    <ul class="menu">
        <li  data-menuanchor="page1" class="active"><a href="#page1">第一頁</a></li><!--設置data-menuanchor是爲了兼容舊版本的瀏覽器-->
 <li  data-menuanchor="page2"><a href="#page2">第二頁</a></li>
        <li  data-menuanchor="page3"><a href="#page3">第三頁</a></li>
        <li  data-menuanchor="page4"><a href="#page4">第四頁</a></li>
    </ul>
    <div class="fullpage">
        <div class="section s1"><h2>第一頁</h2><p>這裏有好多好多內容，我要用CSS3讓從下邊滑動出現</p></div>
        <div class="section s2">
            <div class="slide"><h2>第二屏的第一屏</h2></div>
            <div class="slide"><h2>第二屏的第二屏</h2></div>
            <div class="slide"><h2>第二屏的第三屏</h2></div>

        </div>
        <div class="section s3"><h2>第三頁</h2><p>這裏有好多好多內容，我要</p></div>
        <div class="section s4"><h2>第四頁</h2><p>這裏有好多好多內容，我要用CSS3讓他從左邊滑動出現</p></div>
    </div>
</body>
</html>

CSS部分：jquery

/**
 * fullPage 2.4.6
 * https://github.com/alvarotrigo/fullPage.js
 * MIT licensed
 *
 * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
 */
html, body {
    margin: 0;
    padding: 0;
    overflow:hidden;

    /*Avoid flicker on slides transitions for mobile phones #336 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#superContainer {
    height: 100%;
    position: relative;

    /* Touch detection for Windows 8 */
    -ms-touch-action: none;

    /* IE 11 on Windows Phone 8.1*/
    touch-action: none;
}
.fp-section {
    position: relative;
    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box; /* <=28 */
    box-sizing: border-box;
}
.fp-slide {
    float: left;
}
.fp-slide, .fp-slidesContainer {
    height: 100%;
    display: block;
}
.fp-slides {
    z-index:1;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
    transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.fp-slidesContainer {
    float: left;
    position: relative;
}
.fp-controlArrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
}
.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}
.fp-scrollable {
    overflow: scroll;

}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}
#fp-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
}
#fp-nav.right {
    right: 17px;
}
#fp-nav.left {
    left: 17px;
}
.fp-slidesNav{
    position: absolute;
    z-index: 4;
    left: 50%;
    opacity: 1;
}
.fp-slidesNav.bottom {
    bottom: 17px;
}
.fp-slidesNav.top {
    top: 17px;
}
#fp-nav ul,
.fp-slidesNav ul {
  margin: 0;
  padding: 0;
}
#fp-nav ul li,
.fp-slidesNav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}
.fp-slidesNav ul li {
    display: inline-block;
}
#fp-nav ul li a,
.fp-slidesNav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span {
    background: #333;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0);
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}
#fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
}
#fp-nav ul li:hover .fp-tooltip {
    -webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    width: auto;
    opacity: 1;
}
#fp-nav ul li .fp-tooltip.right {
    right: 20px;
}
#fp-nav ul li .fp-tooltip.left {
    left: 20px;
}

下面記錄使用fullpage的方法：css3

使用方法

一、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>

<!-- jquery.easings.min.js 用於 easing 參數，也能夠使用完整的 jQuery UI 代替，若是不須要設置 easing 參數，可去掉改文件 -->
<script src="js/jquery.easings.min.js"></script>

<!-- 若是 scrollOverflow 設置爲 true，則須要引入 jquery.slimscroll.min.js，通常狀況下不須要 -->
<script src="js/jquery.slimscroll.min.js"></script>

<script src="js/jquery.fullPage.js"></script>

二、HTML

<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>

每一個 section 表明一屏，默認顯示「第一屏」，若是要指定加載頁面時顯示的「屏幕」，能夠在對應的 section 加上 class=」active」，如：git

<div class="section active">第三屏</div>

同時，能夠在 section 內加入 slide，如：github

<div id="dowebok">
    <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(){
    $('#dowebok').fullpage();
});

配置

一、選項

選項 類型 默認值 說明
verticalCentered 字符串 true 內容是否垂直居中
resize 布爾值 false 字體是否隨着窗口縮放而縮放
slidesColor 函數 無 設置背景顏色
anchors 數組 無 定義錨連接
scrollingSpeed 整數 700 滾動速度，單位爲毫秒
easing 字符串 easeInQuart 滾動動畫方式
menu 布爾值 false 綁定菜單，設定的相關屬性與 anchors 的值對應後，菜單能夠控制滾動
navigation 布爾值 false 是否顯示項目導航
navigationPosition 字符串 right 項目導航的位置，可選 left 或 right
navigationColor 字符串 #000 項目導航的顏色
navigationTooltips 數組 空 項目導航的 tip
slidesNavigation 布爾值 false 是否顯示左右滑塊的項目導航
slidesNavPosition 字符串 bottom 左右滑塊的項目導航的位置，可選 top 或 bottom
controlArrowColor 字符串 #fff 左右滑塊的箭頭的背景顏色
loopBottom 布爾值 false 滾動到最底部後是否滾回頂部
loopTop 布爾值 false 滾動到最頂部後是否滾底部
loopHorizontal 布爾值 true 左右滑塊是否循環滑動
autoScrolling 布爾值 true 是否使用插件的滾動方式，若是選擇 false，則會出現瀏覽器自帶的滾動條
scrollOverflow 布爾值 false 內容超過滿屏後是否顯示滾動條
css3 布爾值 false 是否使用 CSS3 transforms 滾動
paddingTop 字符串 0 與頂部的距離
paddingBottom 字符串 0 與底部距離
fixedElements 字符串 無
normalScrollElements 無
keyboardScrolling 布爾值 true 是否使用鍵盤方向鍵導航
touchSensitivity 整數 5
continuousVertical 布爾值 false 是否循環滾動，與 loopTop 及 loopBottom 不兼容
animateAnchor 布爾值 true
normalScrollElementTouchThreshold 整數 5

二、方法

名稱 說明
moveSectionUp() 向上滾動
moveSectionDown() 向下滾動
moveTo(section, slide) 滾動到
moveSlideRight() slide 向右滾動
moveSlideLeft() slide 向左滾動
setAutoScrolling() 設置頁面滾動方式，設置爲 true 時自動滾動
setAllowScrolling() 添加或刪除鼠標滾輪/觸控板控制
setKeyboardScrolling() 添加或刪除鍵盤方向鍵控制
setScrollingSpeed() 定義以毫秒爲單位的滾動速度

三、回調函數

名稱 說明
afterLoad 滾動到某一屏後的回調函數，接收 anchorLink 和 index 兩個參數，anchorLink 是錨連接的名稱，index 是序號，從1開始計算
onLeave 滾動前的回調函數，接收 index、nextIndex 和 direction 3個參數：index 是離開的「頁面」的序號，從1開始計算；

nextIndex 是滾動到的「頁面」的序號，從1開始計算；web

direction 判斷往上滾動仍是往下滾動，值是 up 或 down。json
afterRender 頁面結構生成後的回調函數，或者說頁面初始化完成後的回調函數
afterSlideLoad 滾動到某一水平滑塊後的回調函數，與 afterLoad 相似，接收 anchorLink、index、slideIndex、direction 4個參數
onSlideLeave 某一水平滑塊滾動前的回調函數，與 onLeave 相似，接收 anchorLink、index、slideIndex、direction 4個參數

 

 

在學習了簡單的功能以後，我繼續學習了下一門課程，利用fullpage來製做一個網站：站酷商店數組

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程