书籍是全世界的营养品。生活里没有书籍,就好像没有阳光;智慧里没有书籍,就好像鸟儿没有翅膀。
DBMNG数据库管理与应用
当前位置:首页 > 网文摘录 > 热点推荐
介绍一个“返回顶部”功能的JS插件(模拟电梯运行,同时可以播放音效)Elevator.js下载

“返回顶部”按钮已成为绝大多数网站必备的一个重要元素,它的样式及实现方法也各有千秋。本文将介绍一个带在电梯真实音乐的“返回顶部”JS插件:Elevator.js

Elevator.js通过添加电梯音乐,使网页在返回顶部过程中犹如电梯向上运行,到达目的地后,并伴有“到达”的提示音(Demo展示)。

使用介绍:

Elevator.js是一个独立的标准JS库,并未借助JQuery之类的其他JS库,使用起来相当方便。元素的所有样式均可自行定义。

1.首先需要创建Elevator对像,为其添加音乐子元素。代码如下:


[js]
  1. <script>  
  2. // Elevator script included on the page, already.  
  3.   
  4. window.onload = function() {  
  5.   var elevator = new Elevator({  
  6.     mainAudio: '/src/to/audio.mp3',  
  7.     endAudio: '/src/to/end-audio.mp3'  
  8.   });  
  9. }  
  10.   
  11. // You can run the elevator, by calling.  
  12. elevator.elevate();  
  13. </script>  


2.接着添加HTML元素,通过单击该元素,可实现页面返回顶部的功能,代码如下:


[js]
  1. <div class="elevator-button">Back to Top</div>  
  2.   
  3. <script>  
  4. // Elevator script included on the page, already.  
  5.   
  6. window.onload = function() {  
  7.   var elevator = new Elevator({  
  8.     element: document.querySelector('.elevator-button'),  
  9.     mainAudio: '/src/to/audio.mp3',  
  10.     endAudio: '/src/to/end-audio.mp3'  
  11.   });  
  12. }  
  13. </script>  


3.如果你不想使用音效,可以将音效替换成页面返回顶部所需时间间隔。代码如下:


[js] 
  1. <div class="elevator-button">Back to Top</div>  
  2.   
  3. <script>  
  4. // Elevator script included on the page, already.  
  5.   
  6. window.onload = function() {  
  7.   var elevator = new Elevator({  
  8.     element: document.querySelector('.elevator-button'),  
  9.     duration: 1000 // milliseconds  
  10.   });  
  11. }  
  12. </script>  


内容来源:Github


本站文章内容,部分来自于互联网,若侵犯了您的权益,请致邮件chuanghui423#sohu.com(请将#换为@)联系,我们会尽快核实后删除。
关于我们 - 版权声明 - 服务条款 - RSS订阅 - 工作机会 - 友情链接 - 联系我们 - 在线留言
Copyright © 2006-2018 DBMNG.COM All Rights Reserved. Powered by DEVSOARTECH   豫ICP备11002312号-2

豫公网安备 41010502002439号