浮动【电梯】或【回到顶部】小插件: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的更多相关文章
- web页面浮动回到顶部功能和浮动广告
实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...
- Jquery回到顶部插件【query.scrollUp.js】使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...
- 小程序scroll-view实现回到顶部
一.wxml页面:catchtap阻止冒泡事件. <view class="gotop" hidden='{{!cangotop}}'catchtap="goTop ...
- javascript 特效实现(2)——回到顶部效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery回到顶部插件jQuery GoUp
插件描写叙述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部. 用法很easy 引用jquery库和jquery.goup.min.js到你的页面 <scrip ...
- 一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部
前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...
- HTML 回到顶部 浮动
回到顶部 <div id="FloatDIV" style="position: absolute; top: 0px; z-index: 9999; backgr ...
- 从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部
鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 目录: 1.list加载更多 2.list回到顶部 3.<从微信小程序到鸿蒙js开发>系列文章合集 1.list加 ...
- 页面上常用的一些小功能--QQ、回到顶部
1.QQ <script charset="utf-8" type="text/javascript" src="http://wpa.b.qq ...
随机推荐
- HTML5 WEB SQL
var database = openDatabase("student1", "1.0", "学生表", 1024 * 1024, fun ...
- convert与int.parse int
1,convert :适合将object 转换 int:简单数据转换 int.parse:将string类型转换为int 2,convert:对于空值返回0 不会报异常 int.parse:将会抛出异 ...
- JavaScript 入门教程四 语言基础【3】
一.数据类型介绍: String 1.是使用 Unicode 字符组成的字符序列.所以可以容纳各种语言. 2.字符串可以使用双引号(“”)或者单引号('')表示,但必须成对出现. 3.转移序列使用 \ ...
- PHP 模拟 HTTP 摘要认证(Digest )
<?php header("Content-type: text/html; charset=utf-8"); /*php摘要认证*/ $users = ['dee'=> ...
- eclipse导入项目后,java文件无法编辑的问题
新公司第一天,从svn checkout maven项目后,导入eclipse,发现文件的图标不对,如下图箭头所示,出现这个问题的原因, 是项目的的目录下没有.classpath文件,所以需要执行下m ...
- Linux Vsftpd 连接超时解决方法(被动模式)
http://blog.csdn.net/qq_15766181/article/details/46554643 使用 FileZilla FTP Client 连接 Vsftpd FTP,在没有配 ...
- 【iOS测试】【随笔】崩溃日志获取
◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5942779.html 本打算按照Android的套路去写, ...
- java测试框架整理
Test: Junit4+Hamcrest 不多说了,就靠着两个 import static org.hamcrest.Matchers.equalTo; import static org.juni ...
- uploadify使用教程
<div> <input type="file" id="uploadify" name="uploadify" /> ...
- 如何理解C#委托
一:从下面的例子开始,理解委托变量本质 如上图,Condition是我定义的委托变量.这个委托变量的本质就是地址变量(即C语言当中的指针变量),它保存的是方法的入口地址. 当函数的调用者传递实参给这个 ...