浮动电梯或回到顶部小插件:iElevator.js
Posted Zsingsong
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浮动电梯或回到顶部小插件:iElevator.js相关的知识,希望对你有一定的参考价值。
iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活。
Default Options
_defaults = { floors: null, btns: null, backtop: null, selected: ‘‘, sticky: -1, visible: { isHide: ‘no‘, numShow: 0 }, speed: 400, show: function(me) { me.element.show(); }, hide: function(me) { me.element.hide(); } }
- floors: 页面中floor模块的引用
- btns: 焦点图的引用
- backtop: 回到顶部按钮的引用
- selected: 焦点图在进行滚动或单击时的选中样式
- sticky: 模拟position: sticky定位,并可以指定elevator顶部距离窗口顶部的距离,默认为-1
- visible: 用于控制【电梯】的显示与隐藏,当srollTop值大于numShow时,显示【电梯】,反之则隐藏
- speed: 控制滑条的滚动速度
- show: 可以重写该函数,来定制elevator的显示方式
- hide: 可以重写该函数,来定制elevator的隐藏方式
安装
npm install ielevator || bower install ielevator
使用
1. back to top 【回到顶部】[单击我看Demo效果]
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 [单击我看Demo效果]
html:
<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 [单击我看Demo效果]
HTML:
<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 [单击我看Demo效果]
这是一个require.js的实例
5. 模拟segmentfault文章导航 [单击我看Demo效果]
Javascript:
// 获取Markdown中的标题 var $demo = $(‘#demo‘), $titles = $(‘h2‘), $nav = $demo.find(‘.list‘), $highlight = $demo.find(‘.highlight‘), STR = ‘‘; // 填充标题 $titles.each(function(){ STR += ‘<li><a>‘+ $(this).text() +‘</a></li>‘; }); $nav.html(STR); // 调用ielevator $demo.ielevator({ floors: $titles, btns: $(‘#demo li‘), sticky: 10, selected: $highlight });
以上是关于浮动电梯或回到顶部小插件:iElevator.js的主要内容,如果未能解决你的问题,请参考以下文章