Amaze?UI滾動(dòng)偵測(cè)如何使用

發(fā)布時(shí)間：2017-01-07 11:01:47

發(fā)布者：369563174

瀏覽量:

滾動(dòng)偵測(cè)，說白了就是導(dǎo)航條滾動(dòng)到某一個(gè)地方，JS來(lái)偵測(cè)，加載這個(gè)地方的數(shù)據(jù)，窗口滾動(dòng)時(shí)為根據(jù)設(shè)置頁(yè)面元素添加動(dòng)畫效果（僅在支持 CSS3 動(dòng)畫的瀏覽器上有效）。

它包含的動(dòng)畫有： fade 淡入；scale-up 逐漸放大； scale-dowm 逐漸縮小； slide-top 頂部滑入； slide-bottom 底部劃入； slide-left 左側(cè)劃入； slide-right 右側(cè)滑入。

那么，這些屬性到底是怎么調(diào)用的呢，我們官網(wǎng)就應(yīng)用了這款插件，如下圖，

$JXO]RB}SRKI_1{4}M{ND{95.png$

...

他的調(diào)用方式其實(shí)很簡(jiǎn)單：data-am-scrollspy="{animation: 'fade', delay: 300} animation：’ ’ 這是調(diào)用的動(dòng)畫， delay：300 這是動(dòng)畫進(jìn)行的時(shí)間。但是在調(diào)用這個(gè)的基礎(chǔ)上，當(dāng)然你還得調(diào)用amaze ui的插件也就是amazeui.min.css 跟amazeui.min.js ；還不能少了jquery。加載上這三個(gè)文件，你的動(dòng)畫就可以實(shí)現(xiàn)了。

上一篇： CSS3 :nth-child() 選擇器如何使用

下一篇：前端新手如何使用JQuery插件做出更好的效果

關(guān)鍵詞:

返回列表

相關(guān)文章

2024-12-21

在yonbuilder中如何使用UISlider插件查看詳情

2024-12-07

如何正確選擇汽車租賃系統(tǒng)？四個(gè)角度告訴你查看詳情

2024-12-06

蛋糕店如何在雙十二期間引流鎖客查看詳情

2024-12-03