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

所属分类： JQ特效 UI 滚动

查看演示立即下载

插件描述：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	是否在返回过程中循环播放背景音乐。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： bootstrap响应式jQuery滚动新闻插件
下一个特效： jquery日历控件datePicker