模拟电梯的返回顶部插件Elevator.js

所属分类：UI-滚动

35045 333 查看评论 (6)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：Elevator.js通过在返回时添加音乐，使网页在返回顶部过程中犹如电梯向上运行，到达顶部后，有“到达”的提示音。

Elevator.js通过在返回时添加音乐，使网页在返回顶部过程中犹如电梯向上运行，到达顶部后，有“到达”的提示音。

摘要说明：

Elevator.js是一个独立的轻量级JS插件，无需JQuery等支持，所以使用起来是非常简单的，只需引入Elevator.js一个文件即可，元素的所有样式均可自行定义。此插件只针对于音频和滚动功能。

示例用法：

1.创建一个新的实例：Elevator，然后设置音频文件的引用。

<script>
// Elevator.js已经引入

window.onload = function() {
  var elevator = new Elevator({
    mainAudio: '/yourpath/audio.mp3',//返回过程中播放的声音
    endAudio: '/yourpath/end-audio.mp3'//到达顶部后的提示音
  });
}

// 可以通过调用下面这句代码来启动Elevator
elevator.elevate();
</script>

2.你也可以添加一个element选项，点击此元素将调用“返回到顶部”的功能。

<div class="elevator-button">返回到顶部</div>

<script>
// Elevator.js已经引入

window.onload = function() {
  var elevator = new Elevator({
    element: document.querySelector('.elevator-button'),//选择元素
    mainAudio: '/yourpath/audio.mp3',
    endAudio: '/yourpath/end-audio.mp3'
  });
}
</script>

3.如果你不想使用声音，你还可以设置返回过程的持续时间。

<div class="elevator-button">返回到顶部</div>

<script>
// Elevator.js已经引入

window.onload = function() {
  var elevator = new Elevator({
    element: document.querySelector('.elevator-button'),
    duration: 1000 // 单位：毫秒
  });
}
</script>

选项说明：

属性名称	默认值	说明
duration	undefined	整个“返回到顶部”过程的持续时间（单位：毫秒）。
mainAudio	false	返回过程中播放的声音。
endAudio	false	到达顶部后播放的声音。
preloadAudio	true	是否在页面载入时预加载声音文件。
loopAudio	true	是否在返回过程中循环播放背景音乐。