搜尋
首頁web前端js教程jQuery製作仿Mac Lion OS捲軸效果_jquery

nanoScrollerJS是一款使用簡單方式實作 Mac OS X Lion 系統捲軸效果的jQuery外掛程式。此捲軸插件使用最小的HTML結構 .nano > .nano-content 。其它的滾動條元素 .pane > .nano-slider 是在插件運行時動態載入的。這個滾動條插件利用原生的滾動條可以工作在 iPad、iPhone 和一些 Android Tablets上。

使用方法

HTML結構

以下是這個捲軸外掛程式工作所必須的HTML結構:

複製程式碼 程式碼如下:


   
... content here ... 


nano 和 nano-content 的class名稱可以透過插件參數來改變(改變後插件的CSS檔案也要對應的改變)。

CSS樣式

在HTML

中引入 nanoscroller.css 檔案。

複製程式碼 程式碼如下:


你必須為容器指定一個寬度和高度,並為你的捲軸定制一些基本樣式,例如:

複製程式碼 程式碼如下:

.nano { background: #bba; width: 500px; height: 500px; }
.nano > .nano-content { padding: 10px; }
.nano > .nano-pane   { background: #888; }
.nano > .nano-pane > .nano-slider { background: #111; }

JAVASCRIPT

在頁面中引入 jquery.nanoscroller.js 檔案。

複製程式碼 程式碼如下:


然後使用下面的方法呼叫該捲軸插件,HTML中所有帶有 .nano 的DOM元素都會被應用上該方法:

複製程式碼 程式碼如下:

$(".nano").nanoScroller();

高級方法

捲到頂部:

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ scroll: 'top' });

捲動到底部:

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ scroll: 'bottom' });

捲動到頂部並帶個偏移值:

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ scrollTop: value });

捲動到底部並帶個偏移值:

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ scrollBottom: value });

捲動一個元素:

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ scrollTo: $('#a_node') });

停止滾動操作。這個選項將會使捲軸外掛程式的所有綁定事件無效,並在UI上隱藏捲軸。

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ stop: true });

destroy

銷毀nanoScroller捲軸並將捲軸重設為瀏覽器原生捲軸:

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ destroy: true });

設定滾動條閃動,閃動時間由參數來設定(預設1.5秒)。

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ flash: true });

nanoScroller();

刷新捲軸。此操作會簡單的重新計算滾動條的位置和高度:

複製程式碼 程式碼如下:

$(".nano").nanoScroller();

自訂事件

scrollend

一個自訂的 scrollend 事件會在每次捲軸滾動到容器底部時觸發。 (當滾動條已經到達容器底部,用戶再次滾動時不會觸發該事件)

複製程式碼 程式碼如下:

$(".nano").bind("scrollend", function(e){
    console.log("current HTMLDivElement", e.currentTarget);
});

有些瀏覽器會在同一時間多次觸發該事件,所以應該使用jQuery .bind 或 .on 來綁定該事件。你可以使用 jquery-debounce 外掛程式來讓瀏覽器每隔100毫秒才觸發一次該事件:

複製程式碼 程式碼如下:

$(".nano").debounce("scrollend", function() {
    alert("The end");
}, 100);

scrolltop

和 scrollend 事件相同,它是每次使用者滾動到容器的頂部時觸發。

和 scrollend 事件和 scrolltop 事件相同,它在使用者每次捲動時觸發。此事件附帶滾動條當前位置、最大高度和方向( up 或 down )的js物件參數:

複製程式碼 程式碼如下:

$(".nano").on("update", function(event, values){
    console.debug( values );
});

設定參數

這個捲軸插件中有一組參數可以使用:

iOSNativeScrolling

如果你希望在 iOS 5 中使用原生的捲軸,可以設定為 true 。在 iOS 5 中原生的捲軸會運作的更好。

注意當 iOSNativeScrolling 設定為 true 時, .pane 和 .slider 不會被裝置產生/新增來支援原生的捲軸。

預設值 :false。

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ iOSNativeScrolling: true });

sliderMinHeight

設定滾動元素的最小高度:

預設值 :20。

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ sliderMinHeight: 40 })

sliderMaxHeight

設定滾動元素的最大高度:

預設值 :null。

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ sliderMaxHeight: 200 });

preventPageScrolling

設定為 true 時可以在容器內容捲動到頂部或底部時阻止頁面捲動:

預設值 :false。

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ preventPageScrolling: true });

disableResize

設定為 true 阻止nanoscroller改變大小。如果你設定該選項為 true ,記得要呼叫reset方法,否則會產生奇怪的問題:

預設值 :false。

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ disableResize: true });

alwaysVisible

設定為 true 關閉捲軸停止時自動隱藏功能:

預設值 :false。

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ alwaysVisible: true });

flashDelay

當你開啟 flash 選項時,這個選項用來指定閃爍的延遲:

預設值 :1500。

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ flashDelay: 1000 });

paneClass

捲動條track元素的class名稱。如果你修改了它,需要在CSS檔案中做相應的修改:

預設值 : 'nano-pane'。

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ sliderClass: 'scrollSlider' });

contentClass

捲軸容器div的class名稱。如果你修改了它,需要在CSS檔案中做相應的修改:

預設值 : 'nano-content'。

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ contentClass: 'sliderContent' });

tabIndex

設定可捲動內容的順序,設定為-1時使用tab鍵會跳過該內容:

預設值 :0。

複製程式碼 程式碼如下:

$(".nano").nanoScroller({ tabIndex: 0 });

瀏覽器相容

桌上型設備

IE7
Firefox 3
Chrome
Safari 4
Opera 11.60
行動裝置

iOS 5 (iPhone, iPad 與 iPod Touch)
iOS 4 (附一個插件)
Android Firefox
Android 2.2/2.3 native browser (附一個外掛程式)
Android Opera 11.6 (附一個外掛程式)
透過插件在行動裝置瀏覽器更好的運行nanoScroller

你可以透過 overthrow.js 來讓nanoScroller 在行動瀏覽器上更好的工作。它會在行動裝置上模擬CSS的overflow( overflow: auto;/overflow: scroll; )。

要使用overthrow,在頁面中引入overthrow.js:

複製程式碼 程式碼如下:


然後在你的捲軸內容 div 中加入 overthrow class:

複製程式碼 程式碼如下:


   
... content here ... 


以上就是關於nanoscroller外掛的使用方法,希望大家能夠喜歡。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

jquery中apply()方法怎么用jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。