你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
singsong

浮动【电梯】或【回到底部】的小插件——[ielevator.js] 3个回复 专栏 @ 框架与库

singsong 发布于 2 年前

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 【回到底部】

-------------------------------------------------------------------------------Refer to expample

HTML:

    <div class="elevator elevator-backtop" id="backtop" >
        <a href="javascript:;" class="js-backtop">TOP</a>
    </div>

Javascript:

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

只需获取backtop引用即可,就这么简单!

2. simulate elelvator【模拟电梯】

-------------------------------------------------------------------------------Refer to expample

HTML structure:

    <div class="elevator" id="elevator" data-elevator-options='{"selected": "custome-selected"}'>
        <ul>
            <li><a href="javascript:;" class="custome-selected js-btn">floor1</a></li>
            <li><a href="javascript:;" class="js-btn">floor2</a></li>
            <li><a href="javascript:;" class="js-btn">floor3</a></li>
            <li><a href="javascript:;" class="js-btn">floor4</a></li>
            <li><a href="javascript:;" class="js-btn">floor5</a></li>
            <li><a href="javascript:;" class="js-btn">floor6</a></li>
            <li><a href="javascript:;" class="js-btn">floor7</a></li>
        </ul>
    </div>

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

-------------------------------------------------------------------------------Refer to expample

HTML structure:

    <div class="elevator" id="elevator" data-elevator-options=''>
        <ul>
            <li><a href="javascript:;" class="custome-selected js-btn">floor1</a></li>
            <li><a href="javascript:;" class="js-btn">floor2</a></li>
            <li><a href="javascript:;" class="js-btn">floor3</a></li>
            <li><a href="javascript:;" class="js-btn">floor4</a></li>
            <li><a href="javascript:;" class="js-btn">floor5</a></li>
            <li><a href="javascript:;" class="js-btn">floor6</a></li>
            <li><a href="javascript:;" class="js-btn">floor7</a></li>
            <li><a href="javascript:;" class="js-backtop">TOP</a></li>
        </ul>
    </div>

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的实例 ,貌似链接解析会出错

---------------------------------------------------------------demoAMD
  • sandman

    滚轮来回滚动的话 电梯就疯了

    #1
  • shiyue

    注释都是英文的。。

    #2
  • nong9

    其他的看还行,但是安装那个真不懂,新手。。。-_-

    #3
登录后回复,如无账号,请使用邀请码注册