利用fullpage全屏滾動外掛的使用
jQuery全屏滾動外掛FullPage.js中文幫助文件API
地址:http://www.uedsc.com/fullpage.html
http://www.uedsc.com/fullpage-introduction.html
下載外掛的地址:http://www.dowebok.com/77.html
1----首先不變的是引入這個外掛
<!--全屏滾動外掛樣式-->
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
2--html,在這裡我就舉一個具有選單的滾動效果
<ul id="menu">
<li data-menuanchor="page1" class="active"><a href="#page1">第一屏</a></li>
<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 id="dowebok">
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 繫結選單演示</p>
</div>
<div class="section">
<h3>第二屏</h3>
<p>請檢視左上角,點選可以控制</p>
</div>
<div class="section">
<h3>第三屏</h3>
<div class="slide">第三屏的第一屏</div>
<div class="slide">第三屏的第二屏</div>
<div class="slide">第三屏的第三屏</div>
<div class="slide">第三屏的第四屏</div>
</div>
<div class="section">
<h3>第四屏</h3>
<p>這是最後一屏</p>
</div>
</div>
3--js
$("#dowebok").fullpage({
anchors:['page1','page2','page3','page4'],//這裡是與上面的nemu對應的
menu:‘#menu’ //這裡是導航的選單
});
下面是完整的程式碼。看這裡看這裡:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage.js — 繫結選單演示_dowebok</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<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;}
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
anchors: ['page1', 'page2', 'page3', 'page4'],
menu: '#menu'
});
});
</script>
</head>
<body>
<ul id="menu">
<li data-menuanchor="page1" class="active"><a href="#page1">第一屏</a></li>
<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 id="dowebok">
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 繫結選單演示</p>
</div>
<div class="section">
<h3>第二屏</h3>
<p>請檢視左上角,點選可以控制</p>
</div>
<div class="section">
<h3>第三屏</h3>
<p>繫結的選單沒有預設的樣式,你需要自行編寫</p>
</div>
<div class="section">
<h3>第四屏</h3>
<p>這是最後一屏</p>
</div>
</div>
一個比較讚的常用的方法就是頁面的跳轉moveTo
跳轉到第二個section的第一個slide $.fn.fullpage.moveTo('firstSlide', 2); 跳轉到它的第三個section頁面 $.fn.fullpage.moveTo(3, 0); //和$.fn.fullpage.moveTo(3);效果一樣de
超級簡單的啊 ,現在用外掛完全就可以。不用自己瞭解太多原生的js、jquery啦,其實我也不知道這樣經常使用外掛來達到自己想要的效果到底好不好。但是它確實讓我輕鬆不少。而且我自己也是寫不出來這些的。
相關推薦
利用fullpage全屏滾動外掛的使用
jQuery全屏滾動外掛FullPage.js中文幫助文件API 地址:http://www.uedsc.com/fullpage.html http://www.uedsc.com/fullpage-introduction.html
jquery.fullPage.js全屏滾動外掛的使用方法
相容性: 支援 IE8+ 及其他現代瀏覽器。 主要功能: 1.支援滑鼠滾動; 2.支援前進後退鍵盤控制; 3.多個回撥函式; 4.支援手機.移動裝置; 5.支援視窗縮放自動調整; 6.可設定滾動寬度、背景顏色、滾動速度、迴圈選項、回撥、文字對齊
jQuery全屏滾動外掛 FullPage.js API
引入檔案 <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <scrip
jQuery全屏滾動外掛fullPage.js預覽
原理:window.onmousewheel 參考文件 : 酷炫的全屏製作,在網路上整理了一下,基本的方法如下: 選項 型別 預設值 說明 verticalCentered 字串 true
jQuery fullpage.js 全屏滾動外掛取消滑鼠滾動事件,點選選單欄定位顯示頁面。
問題:專案中遇到一個頁面,使用了全屏滾動外掛,如下有4屏畫面。使用了 fullpage.js,現在想要取消通過滑鼠滑輪滾動來定位頁面的功能,只通過點選左側選單欄來實現的定位頁面。 (此處前提條件是,原來的滑鼠事件有效,同時點選左側選單欄也能實現定位de)
jQuery全屏滾動外掛fullPage.js/可製作全屏滾動網頁
fullPage.js 是 jQuery 的一個外掛,主要功能是製作出全屏網站 fullPage外掛的相容性是相容IE7瀏覽器往上 其餘主流瀏覽器就不描敘了 fullpage外掛支援以下操作 1、外掛可以使用滑鼠滑輪進行滾動 2、當豎屏的時候支援鍵盤的上下箭頭滾動 橫屏對照可以使用的是左
fullPage.js全屏滾動外掛
fullPage.js是基於JQuery的外掛,它能夠很方便、很輕鬆的製作出全屏網站,主要功能有: 支援滑鼠滾動 多個回撥函式 支援手機、平板觸控事件 支援css3動畫 支援視窗縮放,視窗縮放時自動調整 可設定滾動寬度、背景顏色、滾動速度、迴圈選項、回撥、文
jQuery全屏滾動外掛fullPage.js
簡介 如今我們經常能見到全屏網站,尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景,再新增一些簡單的內容,顯得格外的高階大氣上檔次。比如 iPhone 5C 的介紹頁面(檢視),QQ瀏覽器的官網站。如果你也希望你的網站能設計成全屏的,顯得更上檔次,你可以試
Jquery 全屏滾動外掛
簡介 fullPage.js是一個基於jQuery的全屏滾動外掛,它能夠很方便、很輕鬆的製作出全屏網站。 主要功能 支援滑鼠滾動支援前進後退和鍵盤控制多個回撥函式支援手機、平板觸控事件支援 CSS3 動畫支援視窗縮放視窗縮放時自動調整可設定滾動寬度、背景顏色、滾動速度、迴圈
利用fullpage.js外掛實現全屏滾動
fullpage.js是一個基於jQuery的外掛,能幫助我們很容易的實現酷炫的全屏網站的製作。一般全屏網站用幾個很大的圖片或色塊做背景,在新增一些簡單的內容,顯得格外的高階大氣上檔次。fullpage.js支援移動裝置主要的功能有: 支援滑鼠滾動 支援前進後
好程式設計師技術分享jQuery實現類似fullpage外掛的全屏滾動效果
開發十年,就只剩下這套架構體系了! >>>
jQuery-全屏滾動插件【fullPage.js】API 使用方法總結
ide fixed uart 移動 alc add 兩個 電子 寬度 jQuery-全屏滾動插件fullPage.js使用方法總結 作者github及下載地址:https://github.com/alvarotrigo/fullPage.js 今天說下jQuer
學習 | jQuery全屏滾動插件FullPage.js
arrow viewport ice char IT loop 網站 動畫 信息 簡介 fullPage.js是一個基於jQuery的全屏滾動插件,它能夠很方便、很輕松的制作出全屏網站。 主要功能 支持鼠標滾動 支持前進後退和鍵盤控制 多個回調函
使用fullpage.js實現全屏滾動經驗以及踩的坑
全屏滑動一般用在官方網站使用較多這種效果,有很多外掛可以實現這種效果,像swiper,fullpage,iscroll等。鑑於fullpage沒用過,所以就選擇它進行嘗試一下。 首先在網上搜索fullpage.js,會搜出一大堆相關部落格,看了之後發現還是很簡
AlloyTouch全屏滾動插件發布
gin nds math 邊界 true 封裝 asset src 類型 原文鏈接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先驗貨 演示地址也可以點擊這裏。 插件代
小程式功能之全屏滾動
想做一個全屏滾動的效果,於是在網上找了一個差不多的例子,但是覺得有些地方不是很好,於是改進了一下; 原文:https://blog.csdn.net/W_SSNY/article/details/84298788 先上效果: 程式碼: wxml: <!-- 第一
小程式swiper垂向全屏滾動,slide之間迴圈跳動及滑動卡死問題
1.slide之間迴圈跳動問題 因為返回的文章id我繫結到了 item-id 屬性上,反映到標籤上即 current-item-id,這個屬性值得重複即導致current 重複,也就會出現swiper在某一個區間段內重複迴圈。(我的業務場景,假如使用者看完了所有文章
全屏滾動的原理及實現
之前用fullpage外掛做過全屏滾動的頁面,今天用js自己實現了一下,還蠻簡單的. 首先html結構為 <div id="wrap"> <div id="main"> <div id="page1" class="pa
fullpage:全屏翻頁,頂部導航,水平導航demo
$(function () { $('#fullpage').fullpage({ sectionsColor:['#FEDA89','#DE4F50','#904A68','#68C39F','#F05183'], anchors:[
錨點全屏滾動(jQuery)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <