iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活。

Default Options

  1. _defaults = {
  2. floors: null,
  3. btns: null,
  4. backtop: null,
  5. selected: '',
  6. sticky: -1,
  7. visible: {
  8. isHide: 'no',
  9. numShow: 0
  10. },
  11. speed: 400,
  12. show: function(me) {
  13. me.element.show();
  14. },
  15. hide: function(me) {
  16. me.element.hide();
  17. }
  18. }
  • floors:  页面中floor模块的引用
  • btns:  焦点图的引用
  • backtop:  回到顶部按钮的引用
  • selected:  焦点图在进行滚动或单击时的选中样式
  • sticky:  模拟position: sticky定位,并可以指定elevator顶部距离窗口顶部的距离,默认为-1
  • visible:  用于控制【电梯】的显示与隐藏,当srollTop值大于numShow时,显示【电梯】,反之则隐藏
  • speed:  控制滑条的滚动速度
  • show:  可以重写该函数,来定制elevator的显示方式
  • hide:  可以重写该函数,来定制elevator的隐藏方式

安装

  1. npm install ielevator || bower install ielevator

使用

 1. back to top 【回到顶部】[单击我看Demo效果]
HTML:

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

Javascript:

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

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

2. simulate elelvator  [单击我看Demo效果]
HTML:

  1. <div class="elevator" id="elevator" data-elevator-options='{"selected": "custome-selected"}'>
  2. <ul>
  3. <li><a href="javascript:;" class="custome-selected js-btn">floor1</a></li>
  4. <li><a href="javascript:;" class="js-btn">floor2</a></li>
  5. <li><a href="javascript:;" class="js-btn">floor3</a></li>
  6. <li><a href="javascript:;" class="js-btn">floor4</a></li>
  7. <li><a href="javascript:;" class="js-btn">floor5</a></li>
  8. <li><a href="javascript:;" class="js-btn">floor6</a></li>
  9. <li><a href="javascript:;" class="js-btn">floor7</a></li>
  10. </ul>
  11. </div>

Javascript:

  1. $('#elevator').ielevator({
  2. floors: $('.js-floor'),
  3. btns: $('#elevator .js-btn'),
  4. selected: 'selected',
  5. visible: {isHide: 'yes', numShow: 400},
  6. show: function() {
  7. $('#elevator').slideDown(400);
  8. },
  9. hide: function() {
  10. $('#elevator').slideUp(400);
  11. }
  12. });

注意: `data-ielevator-options='{"selected": "custome-selected"}` 配置的优先级是最高的

3. simulate elevator + back to top  [单击我看Demo效果]
HTML:

  1. <div class="elevator" id="elevator" data-elevator-options=''>
  2. <ul>
  3. <li><a href="javascript:;" class="custome-selected js-btn">floor1</a></li>
  4. <li><a href="javascript:;" class="js-btn">floor2</a></li>
  5. <li><a href="javascript:;" class="js-btn">floor3</a></li>
  6. <li><a href="javascript:;" class="js-btn">floor4</a></li>
  7. <li><a href="javascript:;" class="js-btn">floor5</a></li>
  8. <li><a href="javascript:;" class="js-btn">floor6</a></li>
  9. <li><a href="javascript:;" class="js-btn">floor7</a></li>
  10. <li><a href="javascript:;" class="js-backtop">TOP</a></li>
  11. </ul>
  12. </div>

Javascript:

  1. $('#elevator').ielevator({
  2. floors: $('.js-floor'),
  3. btns: $('#elevator .js-btn'),
  4. backtop: $('#elevator .js-backtop'),
  5. selected: 'selected',
  6. visible: {isHide: 'yes', numShow: 400},
  7. show: function() {
  8. $('#elevator').slideDown(400);
  9. },
  10. hide: function() {
  11. $('#elevator').slideUp(400);
  12. }
  13. });

 4. require.js example [单击我看Demo效果]
这是一个require.js的实例

5. 模拟segmentfault文章导航  [单击我看Demo效果]
Javascript:

  1. // 获取Markdown中的标题
  2. var $demo = $('#demo'),
  3. $titles = $('h2'),
  4. $nav = $demo.find('.list'),
  5. $highlight = $demo.find('.highlight'),
  6. STR = '';
  7. // 填充标题
  8. $titles.each(function(){
  9. STR += '<li><a>'+ $(this).text() +'</a></li>';
  10. });
  11. $nav.html(STR);
  12. // 调用ielevator
  13. $demo.ielevator({
  14. floors: $titles,
  15. btns: $('#demo li'),
  16. sticky: 10,
  17. selected: $highlight
  18. });

浮动【电梯】或【回到顶部】小插件:iElevator.js的更多相关文章

  1. web页面浮动回到顶部功能和浮动广告

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

  2. Jquery回到顶部插件【query.scrollUp.js】使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  3. 小程序scroll-view实现回到顶部

    一.wxml页面:catchtap阻止冒泡事件. <view class="gotop" hidden='{{!cangotop}}'catchtap="goTop ...

  4. javascript 特效实现(2)——回到顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jQuery回到顶部插件jQuery GoUp

    插件描写叙述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部. 用法很easy 引用jquery库和jquery.goup.min.js到你的页面 <scrip ...

  6. 一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部

    前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

  7. HTML 回到顶部 浮动

    回到顶部 <div id="FloatDIV" style="position: absolute; top: 0px; z-index: 9999; backgr ...

  8. 从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 目录: 1.list加载更多 2.list回到顶部 3.<从微信小程序到鸿蒙js开发>系列文章合集 1.list加 ...

  9. 页面上常用的一些小功能--QQ、回到顶部

    1.QQ <script charset="utf-8" type="text/javascript" src="http://wpa.b.qq ...

随机推荐

  1. 谢欣伦 - OpenDev原创教程 - 设备查找类CxDeviceFind & CxDeviceMapFind

    这是一个精练的设备查找类,类名.函数名和变量名均采用匈牙利命名法.小写的x代表我的姓氏首字母(谢欣伦),个人习惯而已,如有雷同,纯属巧合. CxDeviceFind的使用如下: void CUsbSc ...

  2. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  3. strace追踪mysql执行语句

    一.strace参数 strace是Linux环境下的一款程序调试工具,用来监察一个应用程序所使用的系统调用及它所接收的系统信息.追踪程序运行时的整个生命周期,输出每一个系统调用的名字,参数,返回值和 ...

  4. pdb调试技巧

    1.先import pdb 在适当的位置加上pdb.set_trace(),在cmd中运行脚本,就可以看到调试的提示符 2.常用的调试命令 h(elp),会打印当前版本,pdb可用的命令,如果要查询某 ...

  5. JavaScript第一天 改变DIV的样式

    onmouseover 当鼠标移到这个对象之上时响应 onmouseout 当鼠标移出这个对象之上时响应 document.getElementById('id')   获取id的元素并可以做一些操作 ...

  6. status bar、navigationBar、tableView吸顶view设置

    1. 隐藏navigationBar self.navigationController.navigationBar.hidden = YES; 2. status bar设置 -(void)view ...

  7. 指定的架构无效。错误: CLR 类型到 EDM 类型的映射不明确

    在使用WebService开发时,同时使用了EF和linq,查询数据时,使用linq(查询订单)可以正常拉出数据, 但是使用EF(查询用户)却会报以下错误: {"指定的架构无效.错误: \r ...

  8. dsview

    http://blog.csdn.net/gzshun/article/details/7495488 http://blog.csdn.net/hjl_1991/article/details/50 ...

  9. 利用paramiko模块实现堡垒机+审计功能

    paramiko模块是一个远程连接服务器,全真模拟ssh2协议的python模块,借助paramiko源码包中的demos目录下:demo.py和interactive.py两个模块实现简单的堡垒机+ ...

  10. [SharePoint 2010] Modify lookup mapping with PowerShell

    SharePoint支持将列表保存成列表模板,但当列表包含Lookup字段时,通过模板创建的列表会丢失Lookup字段的信息. 通过PowerShell,可以修改Lookup字段的xml内容. Fun ...