整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
件描述：fullPage.js 是一個基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網站。
如今我們經常能見到全屏網站，尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景，再添加一些簡單的內容，顯得格外的高端大氣上檔次。比如 iPhone 5C 的介紹頁面（查看），QQ瀏覽器的官網站。如果你也希望你的網站能設計成全屏的，顯得更上檔次，你可以試試 fullPage.js。
主要功能有：
支持鼠標滾動
支持前進后退和鍵盤控制
多個回調函數
支持手機、平板觸摸事件
支持 CSS3 動畫
支持窗口縮放
窗口縮放時自動調整
可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等
1、引入文件
<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>
<!-- 如果 scrollOverflow 設置為 true，則需要引入 jquery.slimscroll.min.js，一般情況下不需要 -->
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
2、HTML
<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>
3、JavaScript
$(function(){
$('#fullpage').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開始計算； direction 判斷往上滾動還是往下滾動，值是 up 或 down。 |
afterRender | 頁面結構生成后的回調函數，或者說頁面初始化完成后的回調函數 |
afterSlideLoad | 滾動到某一水平滑塊后的回調函數，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個參數 |
onSlideLeave | 某一水平滑塊滾動前的回調函數，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個參數 |
腦看視頻在使用全屏的時候，屏幕右側會出現一條白線。如下圖：
經過多次實驗判斷，出現此現象的原因是：
使用Win10系統下，顯示縮放比為系統推薦的125%，并且使用的是Edge瀏覽器，當開啟全屏模式后，就會在屏幕右側邊緣位置出現白線。
此問題屬于Edge瀏覽器自身兼容性的問題，與電腦的屏幕質量沒有任何關系。
操作步驟:
解決方法有兩個：
1、在顯示設置中，將“更改文本、應用和其他項目大小”調節為100%，注銷系統并重新登錄之后，再使用Edge瀏覽器全屏模式播放視頻。
2、此現象目前發現只存在Edge瀏覽器上，建議您使用其它瀏覽器，或者系統自帶的IE瀏覽器。
您需要準確區分Edge瀏覽器和IE瀏覽器，這是兩個不同的瀏覽器，圖標如下：
也可以查看瀏覽器右上方是否有3個小黑點，如圖：
如果是的話，點擊此處會出現下拉提示，選擇“使用Internet Explorer打開”；
也可通過開始菜單內的Windows附件找到并打開IE瀏覽器。
內容來自http://iknow.lenovo.com/detail/dc_174450.html
里巴巴店鋪裝修中離不開全屏輪換廣告，由于阿里店鋪裝修原配的輪換圖有點呆板，所以通過自己編寫的特效代碼來制作全屏輪換廣告還是很有必要的。
(源代碼特效觀看及代碼請在文末)
阿里店鋪裝修全屏廣告輪換效果圖
(由于畫面問題，縮放顯示了，正常寬度是 1920px或100%)
阿里店鋪裝修全屏廣告輪換html代碼
全屏廣告輪換html代碼解釋：
① 屬性的設置，這里nav(觸發切換的標簽)不使用默認，對應的是.lht_nav里面的li元素，切換的面板設置為.lht_pane，上下頁按鈕設置如圖，觸發動作設置成點擊觸發.
② li的觸發標簽個數與lht_pane面板的數量必須要一致。
阿里店鋪裝修全屏廣告輪換css代碼
全屏廣告特效css部分說明：
① 這里涉及到一個css小技巧分享，對觸發標簽容器.lht設置文本居中，然后子元素設置為display:inline-block; (內聯塊狀的意思，區別于float:left),這樣里面的小模塊就會在容器.lht里面居中了，這樣能確保觸發切換的按鈕能一直畫面中間
② 此處只是外部的箭頭圖片路徑地址
③ .disabled類是當上下頁失效(第一頁和最后一頁時)的特定類，小耐這里設置成不顯示，也可以考慮設置成透明。
阿里巴巴國內店鋪裝修的全屏廣告特效的基本代碼就如上所示，此特效實際就是基于切換組件fx.tabs變通出來的特效，部分全屏特效是可以有縮率小圖在左邊或者右邊，實際只要將觸發標簽里面的元素換成圖片即可。
由于自媒體文章避免貼出代碼展示網址，所以如果有意獲取源代碼，請訪問小耐博客獲取或閱讀原文后獲取。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
