成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

浮動【電梯】或【回到底部】的小插件ielevator.js

Tikitoo / 1502人閱讀

摘要：是一個小插件，使用簡單，兼容，支持和種配置方式，比錨點更靈活。

iElevator.js是一個jquery小插件，使用簡單，兼容IE6，支持UMD和3種配置方式，比錨點更靈活。
Default Options
    _defaults = {
        floors: null,
        btns: null,
        backtop: null,
        selected: "",
        visible: {isHide: "no", numShow: 0},
        speed: 400,
        show: function (me) {
            me.element.show();
        },
        hide: function (me) {
            me.element.hide();
        }
      }

floors:用于獲取頁面中對于floor模塊的引用

btns: 獲取焦點圖引用

backtop: 獲取回到頂部按鈕的引用

selected: 用于焦點圖在進(jìn)行滾動或單擊時，選中樣式

visible: 用于控制【電梯】是顯示與隱藏，當(dāng)srollTop值大于numShow是就顯示，小于就隱藏

speed: 控制滑條的滾動速度

show: 可以重新該函數(shù)，來定制elevator的顯示方式

hide: 可以重新該函數(shù)，來定制elevator的隱藏方式

安裝

npm install ielevator or bower install ielevator

使用 1. back to top 【回到底部】
-------------------------------------------------------------------------------example

HTML:


    TOP

Javascript:

$("#backtop").ielevator({
    backtop: $("#backtop .js-backtop")
});

只需獲取backtop引用即可，就這么簡單！

2. simulate elelvator
-------------------------------------------------------------------------------example

HTML structure:

Javascript:

    $("#elevator").ielevator({
        floors: $(".js-floor"),
        btns: $("#elevator .js-btn"),
        selected: "selected",
        visible: {isHide: "yes", numShow: 400},
        show: function() {
            $("#elevator").slideDown(400);
        },
        hide: function() {
            $("#elevator").slideUp(400);
        }
    });

注意： data-ielevator-options="{"selected": "custome-selected"} 配置的優(yōu)先級是最高的

3. simulate elevator + back to top
-------------------------------------------------------------------------------expample

HTML structure:

Javascript:

$("#elevator").ielevator({
    floors: $(".js-floor"),
    btns: $("#elevator .js-btn"),
    backtop: $("#elevator .js-backtop"),
    selected: "selected",
    visible: {isHide: "yes", numShow: 400},
    show: function() {
        $("#elevator").slideDown(400);
    },
    hide: function() {
        $("#elevator").slideUp(400);
    }
});
4. require.js example

這是一個require.js的實例

------------------------------------------------------------------------demo_AMD

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49698.html

相關(guān)文章

  • 浮動【電梯】或【回到底部】的小插件ielevator.js

    摘要：是一個小插件，使用簡單，兼容，支持和種配置方式，比錨點更靈活。 iElevator.js是一個jquery小插件，使用簡單，兼容IE6，支持UMD和3種配置方式，比錨點更靈活。 Default Options _defaults = { floors: null, btns: null, backtop: null, ...

    Cobub 評論0 收藏0

  • Django搭建個人博客：回到頂部浮動按鈕、矢量圖標(biāo)、頁腳沉底和粘性側(cè)邊欄

    摘要：本章集中介紹四個重要的小功能回到頂部浮動按鈕矢量圖標(biāo)頁腳沉底和粘性側(cè)邊欄。因為我們想在全站都擁有這個按鈕，所以將剛寫好的模塊引用到中在后面引入注意模塊用到了，因此要在后面引入。 本章集中介紹四個重要的小功能：回到頂部浮動按鈕、矢量圖標(biāo)、頁腳沉底和粘性側(cè)邊欄。 這幾個功能與Django基本沒啥關(guān)系，更多的是前端知識，但是對博客網(wǎng)站都很重要，問的讀者也比較多，因此也集中講一下好了。 回到頂...

    lovXin 評論0 收藏0

  • throttle與debounce的區(qū)別

    摘要：自己嘗試一下年在的文章中第一次看到的實現(xiàn)方法。這三種實現(xiàn)方法內(nèi)部不同，但是接口幾乎一致。如你所見，我們使用了參數(shù)，因為我們只對用戶停止改變?yōu)g覽器大小時最后一次事件感興趣。 前幾天看到一篇文章，我的公眾號里也分享了《一次發(fā)現(xiàn)underscore源碼bug的經(jīng)歷以及對學(xué)術(shù)界拿來主義的思考》具體文章詳見，微信公眾號：showImg(https://segmentfault.com/img/b...

    Pluser 評論0 收藏0

  • 【譯】通過例子解釋 Debounce 和 Throttle

    摘要：舉例舉例通過拖拽瀏覽器窗口，可以觸發(fā)很多次事件。不支持，所以不能在服務(wù)端用于文件系統(tǒng)事件?？偨Y(jié)將一系列迅速觸發(fā)的事件例如敲擊鍵盤合并成一個單獨的事件。確保一個持續(xù)的操作流以每毫秒執(zhí)行一次的速度執(zhí)行。 Debounce 和 Throttle 是兩個很相似但是又不同的技術(shù)，都可以控制一個函數(shù)在一段時間內(nèi)執(zhí)行的次數(shù)。 當(dāng)我們在操作 DOM 事件的時候，為函數(shù)添加 debounce 或者 th...

    LeoHsiun 評論0 收藏0

  • [譯]通過實例講解Debouncing和Throtting(防抖與節(jié)流)

    摘要：譯通過實例講解和防抖與節(jié)流源碼中推薦的文章，為了學(xué)習(xí)英語，翻譯了一下原文鏈接作者本文來自一位倫敦前端工程師的技術(shù)投稿。首次或立即你可能發(fā)現(xiàn)防抖事件在等待觸發(fā)事件執(zhí)行，直到事件都結(jié)束后它才執(zhí)行。 [譯]通過實例講解Debouncing和Throtting(防抖與節(jié)流) lodash源碼中推薦的文章，為了學(xué)習(xí)（英語），翻譯了一下~ 原文鏈接 作者：DAVID CORBACHO 本文來自一位...

    Jenny_Tong 評論0 收藏0

發(fā)表評論

0條評論

Tikitoo

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<