整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
件描述：fullPage.js 是一個(gè)基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網(wǎng)站。
如今我們經(jīng)常能見到全屏網(wǎng)站，尤其是國(guó)外網(wǎng)站。這些網(wǎng)站用幾幅很大的圖片或色塊做背景，再添加一些簡(jiǎn)單的內(nèi)容，顯得格外的高端大氣上檔次。比如 iPhone 5C 的介紹頁(yè)面（查看），QQ瀏覽器的官網(wǎng)站。如果你也希望你的網(wǎng)站能設(shè)計(jì)成全屏的，顯得更上檔次，你可以試試 fullPage.js。
主要功能有：
支持鼠標(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)、文本對(duì)齊方式等等
1、引入文件
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.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>
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 | 內(nèi)容是否垂直居中 |
resize | 布爾值 | false | 字體是否隨著窗口縮放而縮放 |
slidesColor | 函數(shù) | 無(wú) | 設(shè)置背景顏色 |
anchors | 數(shù)組 | 無(wú) | 定義錨鏈接 |
scrollingSpeed | 整數(shù) | 700 | 滾動(dòng)速度，單位為毫秒 |
easing | 字符串 | easeInQuart | 滾動(dòng)動(dòng)畫方式 |
menu | 布爾值 | false | 綁定菜單，設(shè)定的相關(guān)屬性與 anchors 的值對(duì)應(yīng)后，菜單可以控制滾動(dòng) |
navigation | 布爾值 | false | 是否顯示項(xiàng)目導(dǎo)航 |
navigationPosition | 字符串 | right | 項(xiàng)目導(dǎo)航的位置，可選 left 或 right |
navigationColor | 字符串 | #000 | 項(xiàng)目導(dǎo)航的顏色 |
navigationTooltips | 數(shù)組 | 空 | 項(xiàng)目導(dǎo)航的 tip |
slidesNavigation | 布爾值 | false | 是否顯示左右滑塊的項(xiàng)目導(dǎo)航 |
slidesNavPosition | 字符串 | bottom | 左右滑塊的項(xiàng)目導(dǎo)航的位置，可選 top 或 bottom |
controlArrowColor | 字符串 | #fff | 左右滑塊的箭頭的背景顏色 |
loopBottom | 布爾值 | false | 滾動(dòng)到最底部后是否滾回頂部 |
loopTop | 布爾值 | false | 滾動(dòng)到最頂部后是否滾底部 |
loopHorizontal | 布爾值 | true | 左右滑塊是否循環(huán)滑動(dòng) |
autoScrolling | 布爾值 | true | 是否使用插件的滾動(dòng)方式，如果選擇 false，則會(huì)出現(xiàn)瀏覽器自帶的滾動(dòng)條 |
scrollOverflow | 布爾值 | false | 內(nèi)容超過(guò)滿屏后是否顯示滾動(dòng)條 |
css3 | 布爾值 | false | 是否使用 CSS3 transforms 滾動(dòng) |
paddingTop | 字符串 | 0 | 與頂部的距離 |
paddingBottom | 字符串 | 0 | 與底部距離 |
fixedElements | 字符串 | 無(wú) | |
normalScrollElements | 無(wú) | ||
keyboardScrolling | 布爾值 | true | 是否使用鍵盤方向鍵導(dǎo)航 |
touchSensitivity | 整數(shù) | 5 | |
continuousVertical | 布爾值 | false | 是否循環(huán)滾動(dòng)，與 loopTop 及 loopBottom 不兼容 |
animateAnchor | 布爾值 | true | |
normalScrollElementTouchThreshold | 整數(shù) | 5 |
moveSectionUp() | 向上滾動(dòng) |
moveSectionDown() | 向下滾動(dòng) |
moveTo(section, slide) | 滾動(dòng)到 |
moveSlideRight() | slide 向右滾動(dòng) |
moveSlideLeft() | slide 向左滾動(dòng) |
setAutoScrolling() | 設(shè)置頁(yè)面滾動(dòng)方式，設(shè)置為 true 時(shí)自動(dòng)滾動(dòng) |
setAllowScrolling() | 添加或刪除鼠標(biāo)滾輪/觸控板控制 |
setKeyboardScrolling() | 添加或刪除鍵盤方向鍵控制 |
setScrollingSpeed() | 定義以毫秒為單位的滾動(dòng)速度 |
afterLoad | 滾動(dòng)到某一屏后的回調(diào)函數(shù)，接收 anchorLink 和 index 兩個(gè)參數(shù)，anchorLink 是錨鏈接的名稱，index 是序號(hào)，從1開始計(jì)算 |
onLeave | 滾動(dòng)前的回調(diào)函數(shù)，接收 index、nextIndex 和 direction 3個(gè)參數(shù)： index 是離開的“頁(yè)面”的序號(hào)，從1開始計(jì)算； nextIndex 是滾動(dòng)到的“頁(yè)面”的序號(hào)，從1開始計(jì)算； direction 判斷往上滾動(dòng)還是往下滾動(dòng)，值是 up 或 down。 |
afterRender | 頁(yè)面結(jié)構(gòu)生成后的回調(diào)函數(shù)，或者說(shuō)頁(yè)面初始化完成后的回調(diào)函數(shù) |
afterSlideLoad | 滾動(dòng)到某一水平滑塊后的回調(diào)函數(shù)，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個(gè)參數(shù) |
onSlideLeave | 某一水平滑塊滾動(dòng)前的回調(diào)函數(shù)，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個(gè)參數(shù) |
腦看視頻在使用全屏的時(shí)候，屏幕右側(cè)會(huì)出現(xiàn)一條白線。如下圖：
經(jīng)過(guò)多次實(shí)驗(yàn)判斷，出現(xiàn)此現(xiàn)象的原因是：
使用Win10系統(tǒng)下，顯示縮放比為系統(tǒng)推薦的125%，并且使用的是Edge瀏覽器，當(dāng)開啟全屏模式后，就會(huì)在屏幕右側(cè)邊緣位置出現(xiàn)白線。
此問題屬于Edge瀏覽器自身兼容性的問題，與電腦的屏幕質(zhì)量沒有任何關(guān)系。
操作步驟:
解決方法有兩個(gè)：
1、在顯示設(shè)置中，將“更改文本、應(yīng)用和其他項(xiàng)目大小”調(diào)節(jié)為100%，注銷系統(tǒng)并重新登錄之后，再使用Edge瀏覽器全屏模式播放視頻。
2、此現(xiàn)象目前發(fā)現(xiàn)只存在Edge瀏覽器上，建議您使用其它瀏覽器，或者系統(tǒng)自帶的IE瀏覽器。
您需要準(zhǔn)確區(qū)分Edge瀏覽器和IE瀏覽器，這是兩個(gè)不同的瀏覽器，圖標(biāo)如下：
也可以查看瀏覽器右上方是否有3個(gè)小黑點(diǎn)，如圖：
如果是的話，點(diǎn)擊此處會(huì)出現(xiàn)下拉提示，選擇“使用Internet Explorer打開”；
也可通過(guò)開始菜單內(nèi)的Windows附件找到并打開IE瀏覽器。
內(nèi)容來(lái)自http://iknow.lenovo.com/detail/dc_174450.html
里巴巴店鋪裝修中離不開全屏輪換廣告，由于阿里店鋪裝修原配的輪換圖有點(diǎn)呆板，所以通過(guò)自己編寫的特效代碼來(lái)制作全屏輪換廣告還是很有必要的。
(源代碼特效觀看及代碼請(qǐng)?jiān)谖哪?
阿里店鋪裝修全屏廣告輪換效果圖
(由于畫面問題，縮放顯示了，正常寬度是 1920px或100%)
阿里店鋪裝修全屏廣告輪換html代碼
全屏廣告輪換html代碼解釋：
① 屬性的設(shè)置，這里nav(觸發(fā)切換的標(biāo)簽)不使用默認(rèn)，對(duì)應(yīng)的是.lht_nav里面的li元素，切換的面板設(shè)置為.lht_pane，上下頁(yè)按鈕設(shè)置如圖，觸發(fā)動(dòng)作設(shè)置成點(diǎn)擊觸發(fā).
② li的觸發(fā)標(biāo)簽個(gè)數(shù)與lht_pane面板的數(shù)量必須要一致。
阿里店鋪裝修全屏廣告輪換css代碼
全屏廣告特效css部分說(shuō)明：
① 這里涉及到一個(gè)css小技巧分享，對(duì)觸發(fā)標(biāo)簽容器.lht設(shè)置文本居中，然后子元素設(shè)置為display:inline-block; (內(nèi)聯(lián)塊狀的意思，區(qū)別于float:left),這樣里面的小模塊就會(huì)在容器.lht里面居中了，這樣能確保觸發(fā)切換的按鈕能一直畫面中間
② 此處只是外部的箭頭圖片路徑地址
③ .disabled類是當(dāng)上下頁(yè)失效(第一頁(yè)和最后一頁(yè)時(shí))的特定類，小耐這里設(shè)置成不顯示，也可以考慮設(shè)置成透明。
阿里巴巴國(guó)內(nèi)店鋪裝修的全屏廣告特效的基本代碼就如上所示，此特效實(shí)際就是基于切換組件fx.tabs變通出來(lái)的特效，部分全屏特效是可以有縮率小圖在左邊或者右邊，實(shí)際只要將觸發(fā)標(biāo)簽里面的元素?fù)Q成圖片即可。
由于自媒體文章避免貼出代碼展示網(wǎng)址，所以如果有意獲取源代碼，請(qǐng)?jiān)L問小耐博客獲取或閱讀原文后獲取。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
