當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

fullpage的基本使用方法

發(fā)布時(shí)間：2023/12/20 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 fullpage的基本使用方法小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

fullPage.js 是一個(gè)基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網(wǎng)站。
主要功能有：
支持鼠標(biāo)滾動(dòng)
支持前進(jìn)后退和鍵盤控制
多個(gè)回調(diào)函數(shù)
支持手機(jī)、平板觸摸事件
支持 CSS3 動(dòng)畫
支持窗口縮放
窗口縮放時(shí)自動(dòng)調(diào)整
可設(shè)置滾動(dòng)寬度、背景顏色、滾動(dòng)速度、循環(huán)選項(xiàng)、回調(diào)、文本對齊方式等等（轉(zhuǎn)載）
第一步：
fullpage.js 下載地址
https://github.com/alvarotrigo/fullPage.js
進(jìn)入下載頁面之后點(diǎn)擊紅色框然后選擇第二個(gè)選項(xiàng)。

第二步：
將下載的壓縮包進(jìn)行解壓，然后把js和css文件夾放入自己的項(xiàng)目中
第三步：引用js和css文件

然后就可以正常的使用了。
注意jq的版本必須要在1.8以上。
下面是一個(gè)簡單的列子：（官方提供的）

<!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)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： OSPF Vlink peer的配置
下一篇： SESAM | GeniE 实用教程