生活随笔
收集整理的這篇文章主要介紹了
fullpage的基本使用方法
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
fullPage.js 是一個基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網(wǎng)站。
主要功能有：
支持鼠標滾動
支持前進后退和鍵盤控制
多個回調(diào)函數(shù)
支持手機、平板觸摸事件
支持 CSS3 動畫
支持窗口縮放
窗口縮放時自動調(diào)整
可設(shè)置滾動寬度、背景顏色、滾動速度、循環(huán)選項、回調(diào)、文本對齊方式等等（轉(zhuǎn)載）
第一步：
fullpage.js 下載地址
https://github.com/alvarotrigo/fullPage.js
進入下載頁面之后點擊紅色框然后選擇第二個選項。
第二步：
將下載的壓縮包進行解壓，然后把js和css文件夾放入自己的項目中
第三步：引用js和css文件
<link rel
="stylesheet" href
="css/jquery.fullPage.css">
<script src
="js/jquery-1.8.3.min.js"></script
>
<!-- jquery
.easings
.min
.js 是必須的，用于 easing 參數(shù)，也可以使用完整的 jQuery
UI 代替
-->
<script src
="js/jquery.easings.min.js"></script
>
<!-- 如果 scrollOverflow 設(shè)置為
true，則需要引入 jquery
.slimscroll
.min
.js，一般情況下不需要
-->
<script src
="js/jquery.slimscroll.min.js"></script
>
<script src
="js/jquery.fullPage.js"></script
>
然后就可以正常的使用了。
注意jq的版本必須要在1.8以上。
下面是一個簡單的列子：（官方提供的）
<!DOCTYPE html
>
<html lang
="en"><head
><meta charset
="UTF-8" /><meta name
="viewport" content
="width=device-width, initial-scale=1.0" /><title
>Document
</title
><link rel
="stylesheet" href
="css/jquery.fullPage.css" /></head
><body
><div id
="dowebok"><div
class="section"><h3
>第一屏
</h3
></div
><div
class="section"><h3
>第二屏
</h3
></div
><div
class="section"><div
class="slide">第三屏的第一屏
</div
><div
class="slide">第三屏的第二屏
</div
><div
class="slide">第三屏的第三屏
</div
><div
class="slide">第三屏的第四屏
</div
></div
><div
class="section"><h3
>第四屏
</h3
></div
></div
><script src
="js/jquery-1.8.3.min.js"></script
><script src
="js/jquery.fullPage.js"></script
><script
>$(function () {$("#dowebok").fullpage({sectionsColor
:['#c2e5ff','#ccc','#7babff','#f40'],});});</script
></body
>
</html
>
總結(jié)
以上是生活随笔為你收集整理的fullpage的基本使用方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
