国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
Elevator.js：模擬電梯運行的“返回頂部”JS插件
摘要：“返回頂部”按鈕已成絕大多數(shù)網(wǎng)站的標(biāo)配。本文將介紹一個帶在電梯真實音樂的“返回頂部”JS插件：Elevator.js。它為獨立標(biāo)準(zhǔn)JS庫，實現(xiàn)簡單，還可隨意定義元素的樣式。



“返回頂部”按鈕已成為絕大多數(shù)網(wǎng)站必備的一個重要元素，它的樣式及實現(xiàn)方法也各有千秋。本文將介紹一個帶在電梯真實音樂的“返回頂部”JS插件：Elevator.js。


Elevator.js通過添加電梯音樂，使網(wǎng)頁在返回頂部過程中猶如電梯向上運行，到達目的地后，并伴有“到達”的提示音（Demo展示）。


使用介紹：


Elevator.js是一個獨立的標(biāo)準(zhǔn)JS庫，并未借助JQuery之類的其他JS庫，使用起來相當(dāng)方便。元素的所有樣式均可自行定義。


1.首先需要創(chuàng)建Elevator對像，為其添加音樂子元素。代碼如下：


  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>  
復(fù)制代碼



2.接著添加HTML元素，通過單擊該元素，可實現(xiàn)頁面返回頂部的功能，代碼如下：



  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>  
復(fù)制代碼


3.如果你不想使用音效，可以將音效替換成頁面返回頂部所需時間間隔。代碼如下：


  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>  
復(fù)制代碼


（翻譯：陳秋歌）


內(nèi)容來源：Github

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
歡迎使用互動中國免費統(tǒng)計
MTV音樂連播播放器多種樣式可選
網(wǎng)站內(nèi)部優(yōu)化：JS腳本代碼和CSS外置
jQuery個人名片樣式代碼
jQuery 自定義網(wǎng)頁滾動條樣式插件 mCustomScrollbar 的介紹和使用方法
Less 入門文檔
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點擊這里聯(lián)系客服！

聯(lián)系客服