swiper.js 總結

swiper.js
Swiper 是一款免費以及輕量級的移動設備觸控滑塊的框架囊扳,使用硬件加速過渡(如果該設備支持的話)。主要使用與移動端的網(wǎng)站扛门、網(wǎng)頁應用程序(web apps),以及原生的應用程序(native apps)。主要是為IOS而設計的李剖,同時,在Android囤耳、WP8系統(tǒng)以及現(xiàn)代桌面瀏覽器也有著良好的用戶體驗篙顺。
特征(feature)
1、1:1觸控運動
Swiper默認提供1:1的觸控距離充择,當然德玫,這個比率是可以設置的。(touchRatio)
2椎麦、觸控模仿
這個功能對于開發(fā)桌面網(wǎng)站會很有用宰僧。簡單來說,就是因為Swiper能夠讓鼠標事件表現(xiàn)得像觸屏事件(點擊以及拖曳滑塊)
3观挎、水平/垂直
Swiper運動主要有兩種模式琴儿,horizontal(水平滑動)以及vertical(垂直運動的滑動)
4、自由模式(Free Mode)
這種模式下能夠讓slides 無需定位嘁捷,就像通常的滑動條造成。(看下面的例子)
5、旋轉(zhuǎn)調(diào)整 (rotation/resize)
Swiper 在移動設備旋轉(zhuǎn)后能自適應尺寸雄嚣。
6晒屎、響應式
能使用百分比的寬高定義slides,為移動端提供不同的解決方案喘蟆。
7、滑動阻止
簡單來說鼓鲁,就是蕴轨,只能使用一種模式,水平或者垂直滑動骇吭。
8橙弱、抵抗反彈(resistant bounds)
Swiper能夠提供一種機制,就是當滑動滑塊超過最左以及最右(最上或最下)的位置時觸發(fā)的一種抵御機制绵跷。
9膘螟、原生要素(native momentum)
有不少的原生東西提供給Swiper。
10碾局、內(nèi)建分頁控制
Swiper能夠快速生成內(nèi)建的分頁控制(pagination),指定html 某一標簽為pagination荆残,Swiper就能做很多東西了。
11净当、自動播放
只用設置延遲時間内斯,Swiper就會自動地輪播slides直到你觸碰該滑塊(touch)為止。
12像啼、循環(huán)模式(Loop mode)
該種模式下俘闯,你能夠無限滑動滑塊,到最后一個之后會跳轉(zhuǎn)回第一個忽冻。
13真朗、旋轉(zhuǎn)模式(Carousel mode)
Swiper 能夠讓你在slides父容器下設置你所需要展示的slides數(shù)量。
14僧诚、滑動容器
在該特征下能夠使用Swiper在一些簡單的能滑動的區(qū)域里遮婶,沒有slides。在Apps里十分有用湖笨。
15旗扑、嵌套Swipers
能夠?qū)wipers嵌套入各種不同的Swiper 的slide里,例如垂直的或水平的慈省。
16臀防、任意的HTML 標簽
可以將任一的HTML 內(nèi)容放到slide里,不止僅限于圖像边败。
17袱衷、硬件加速
swiper 使用硬件加速技術(如果該移動設備支持的話)能夠得到良好流暢的動畫效果以及優(yōu)美的外觀,尤其是在IOS設備里笑窜。
18致燥、豐富的API
Swiper擁有豐富的API接口。(不過關于中文文檔似乎不多怖侦,沒找著篡悟。)能夠讓開發(fā)者生成個人獨有的分頁器(pagination),上下滑塊的按鈕以及4個回調(diào)函數(shù):onTouchStart,onTouchMove,onTouchEnd,onSlideSwitch匾寝。
19搬葬、靈活的配置
Swiper在初始化的時候能夠接受多個參數(shù)以便讓其盡可能的靈活。能夠配置動畫的速度(speed)艳悔,模式(mode水平抑或垂直的)急凰,以及自由模式(free mode)…以及其他..
20、插件API(Plugins API)
Swiper從1.7版本開始就變得強大起來了猜年,因為有更多而簡單的插件API允許開發(fā)者創(chuàng)造屬于自己的Swiper 插件或通過Swiper的核心創(chuàng)制hooks(掛鉤)(該官網(wǎng)處提供了幾款優(yōu)秀的插件Swiper smooth progress, Swiper hash navigation,swiper scrollbar)
21抡锈、良好的兼容性
Swiper通用性的測試環(huán)境:移動端的Safari(iOS5下),Android 2.1+乔外,windows Phone 8,以及最新版本的谷歌瀏覽器(Chrome)床三,Safari,F(xiàn)irefox杨幼,IE10 以及歐朋瀏覽器(Opera)
22撇簿、老版本IE的兼容
Swiper 2.x 開始,通過DOM動畫差购,而非css transitions 兼容IE7 以上(需要包含jQuery)四瘫,因為IE7不支持css3 transitions….簡單來說,支持IE7 以上版本欲逃。
23找蜜、獨立性
Swiper不依賴像jQuery那樣的js類庫,因此能夠讓Swiper更加的小型以及快速稳析。所以Swiper能夠很安全地應用諸如jQuery洗做、jQuery Mobile,jQTouch等等其他的js類庫迈着。
24竭望、超輕量級
壓縮后僅僅10KB左右。
以上裕菠,就是Swiper能夠做的咬清,應用以上特征就使用原生屬性方法能夠快速生成令人驚嘆的觸控接口以及apps。

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末奴潘,一起剝皮案震驚了整個濱河市旧烧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌画髓,老刑警劉巖掘剪,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異奈虾,居然都是意外死亡夺谁,警方通過查閱死者的電腦和手機廉赔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來匾鸥,“玉大人蜡塌,你說我怎么就攤上這事∥鸶海” “怎么了馏艾?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長奴愉。 經(jīng)常有香客問我琅摩,道長,這世上最難降的妖魔是什么锭硼? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任房资,我火速辦了婚禮,結果婚禮上檀头,老公的妹妹穿的比我還像新娘志膀。我一直安慰自己,他們只是感情好鳖擒,可當我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布溉浙。 她就那樣靜靜地躺著,像睡著了一般蒋荚。 火紅的嫁衣襯著肌膚如雪戳稽。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天期升,我揣著相機與錄音惊奇,去河邊找鬼。 笑死播赁,一個胖子當著我的面吹牛颂郎,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播容为,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼乓序,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了坎背?” 一聲冷哼從身側響起替劈,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎得滤,沒想到半個月后陨献,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡懂更,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年眨业,在試婚紗的時候發(fā)現(xiàn)自己被綠了急膀。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡龄捡,死狀恐怖脖阵,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情墅茉,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布呜呐,位于F島的核電站就斤,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蘑辑。R本人自食惡果不足惜洋机,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望洋魂。 院中可真熱鬧绷旗,春花似錦、人聲如沸副砍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽豁翎。三九已至角骤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間心剥,已是汗流浹背邦尊。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留优烧,地道東北人蝉揍。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像畦娄,于是被迫代替她去往敵國和親又沾。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,860評論 2 361

推薦閱讀更多精彩內(nèi)容