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

Tikitoo 發布于2019-08-01 14:59 / 1496人閱讀

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

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: 用于焦點圖在進行滾動或單擊時，選中樣式

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

speed: 控制滑條的滾動速度

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

hide: 可以重新該函數，來定制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:


    
        floor1
        floor2
        floor3
        floor4
        floor5
        floor6
        floor7

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"} 配置的優先級是最高的

3. simulate elevator + back to top

-------------------------------------------------------------------------------expample

HTML structure:


    
        floor1
        floor2
        floor3
        floor4
        floor5
        floor6
        floor7
        TOP

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

GPU云服務器云服務器浮動電梯 html回到頁面底部 js 浮動回到頂部 div浮動底部

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49698.html

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

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

Cobub 2019-08-19 17:16 評論0 收藏0
Django搭建個人博客：回到頂部浮動按鈕、矢量圖標、頁腳沉底和粘性側邊欄

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

lovXin 2019-07-31 10:17 評論0 收藏0
throttle與debounce的區別

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

Pluser 2019-08-19 18:04 評論0 收藏0
【譯】通過例子解釋 Debounce 和 Throttle

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

LeoHsiun 2019-08-23 11:34 評論0 收藏0
[譯]通過實例講解Debouncing和Throtting(防抖與節流)

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

Jenny_Tong 2019-08-23 13:42 評論0 收藏0