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

Tikitoo 发布于2019-08-01 14:59 / 1385人阅读

摘要：是一个小插件，使用简单，兼容，支持和种配置方式，比锚点更灵活。

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浮动底部

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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