jQuery 插件

jQuery 各類插件集合介紹

jQuery----easing.js插件

用法介紹

 1  
 2 <script> 
 3 $(function(){ 
 4 $.easing.def="easeInQuad";//設置默認效果 
 5 var callback=function (){ 
 6 alert("ok"); 
 7 } 
 8 $("#t1").animate({ 
 9 "top":600 
10 },{duration: 3000, 
11 easing:"easeInQuad",//可省略 
12 complete: callback}) 
13 }) 
14 </script> 

具體參數細節: 
duration 選項: 
毫秒數 
complete 選項: 
完成後調用 
easing 選項: 
jswing 
def 
easeInQuad 
easeOutQuad 
easeInOutQuad 
easeInCubic 
easeOutCubic 
easeInOutCubic 
easeInQuart 
easeOutQuart 
easeInOutQuart 
easeInQuint 
easeOutQuint 
easeInOutQuint 
easeInSine 
easeOutSine 
easeInOutSine 
easeInExpo 
easeOutExpo 
easeInOutExpo 
easeInCirc 
easeOutCirc 
easeInOutCirc 
easeInElastic 
easeOutElastic 
easeInOutElastic 
easeInBack 
easeOutBack 
easeInOutBack 
easeInBounce 
easeOutBounce 
easeInOutBounce 

判斷移動端設備而後重定向地址 插件 isMobile

jquery -- mouseWheel.js  用法

 1 $(window).on('mousewheel', function(event, delta) {  
 2        console.log(delta) //1或者-1 3    });

 

 jquery---fullPage.js

一個簡單和易於使用的插件建立全屏滾動網站

用法：

文件引入 1：jqeury

　　　　　2：jquery.fullpage.js

　　　　　3: jquery.fullpage.css

　　　　　4: 能夠選擇性的選擇jqueryUI庫

必須的html結構

 

1 <div id="fullpage">
2     <div class="section">Some section</div>
3     <div class="section">Some section</div>
4     <div class="section">Some section</div>
5     <div class="section">Some section</div>
6 </div>

 

若是你想定義一個不一樣的起點,而不是第一部分或一節的第一張幻燈片,只是給想先加載的部分 添加活動類。

 

 

1 <div class="section active">Some section</div>

 

安裝運行

1 $(document).ready(function() {
2     $('#fullpage').fullpage();
3 });

一個更復雜的初始化全部選項設置能夠看起來像這樣

 1 $(document).ready(function() {
 2     $('#fullpage').fullpage({
 3         //Navigation
 4         menu: false,
 5         lockAnchors: false,
 6         anchors:['firstPage', 'secondPage'],
 7         navigation: false,
 8         navigationPosition: 'right',
 9         navigationTooltips: ['firstSlide', 'secondSlide'],
10         showActiveTooltip: false,
11         slidesNavigation: true,
12         slidesNavPosition: 'bottom',
13 
14         //Scrolling
15         css3: true,
16         scrollingSpeed: 700,
17         autoScrolling: true,
18         fitToSection: true,
19         fitToSectionDelay: 1000,
20         scrollBar: false,
21         easing: 'easeInOutCubic',
22         easingcss3: 'ease',
23         loopBottom: false,
24         loopTop: false,
25         loopHorizontal: true,
26         continuousVertical: false,
27         normalScrollElements: '#element1, .element2',
28         scrollOverflow: false,
29         touchSensitivity: 15,
30         normalScrollElementTouchThreshold: 5,
31 
32         //Accessibility
33         keyboardScrolling: true,
34         animateAnchor: true,
35         recordHistory: true,
36 
37         //Design
38         controlArrows: true,
39         verticalCentered: true,
40         resize : false,
41         sectionsColor : ['#ccc', '#fff'],
42         paddingTop: '3em',
43         paddingBottom: '10px',
44         fixedElements: '#header, .footer',
45         responsiveWidth: 0,
46         responsiveHeight: 0,
47 
48         //Custom selectors
49         sectionSelector: '.section',
50         slideSelector: '.slide',
51 
52         //events
53         onLeave: function(index, nextIndex, direction){},
54         afterLoad: function(anchorLink, index){},
55         afterRender: function(){},
56         afterResize: function(){},
57         afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
58         onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
59     });
60 });

View Code

參數說明：

jQuery全屏滾動插件FullPage.js中文幫助文檔API

問說網  • 2014-06-12 10:58:24 • 36934 瀏覽

七牛最近改版了網站，弄成全屏滾動的特效，真的很炫，因而查看其源代碼，發現了一個fullPage.js插件，因而百度了一下，還就是這個插件的做用，其實有不少網站都作了全屏滾動的特效，效果也很好看，今天就給你們說說fullPage.js的使用方法和設置。

簡介

fullPage.js是一個基於jQuery的全屏滾動插件，它可以很方便、很輕鬆的製做出全屏網站。

主要功能

• 支持鼠標滾動
• 支持前進後退和鍵盤控制
• 多個回調函數
• 支持手機、平板觸摸事件
• 支持 CSS3 動畫
• 支持窗口縮放
• 窗口縮放時自動調整
• 可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等

兼容性

fullPage.js 支持 IE8+ 及其餘現代瀏覽器。

使用方法

一、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

二、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>

三、JavaScript

$(function(){
    $('#fullpage').fullpage({
        'verticalCentered': false,
        'css3': true,
        'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
        anchors: ['page1', 'page2', 'page3', 'page4'],
        'navigation': true,
        'navigationPosition': 'right',
        'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple']
    })
})

經測試，最好至少有 anchors 這個參數，不然在火狐瀏覽器中，第一次滾動會直接滾到底部。

點擊這裏查看上面代碼的示例：http://www.uedsc.com/wp-content/uploads/2015/02/fullpage-demo/

配置

一、選項

選項	類型	默認值	說明
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個參數