我們都很喜歡移動設備上的“下拉刷新”功能,那麼如果這個效果應用到傳統網頁上怎麼樣?嗯,Hook.js 可以實現。他們採用了手機和平板電腦中的這個創新,只要向下滾動了一下,然後彈回到頂部,頁面就會自動刷新。
您可能感興趣的相關文章
在線演示(需要翻牆) 源碼下載
Hook.js 使用非常簡單,首先引入下面三個文件:
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="hook/hook.css" type="text/css" />
<script src="hook/hook.js" type="text/javascript"></script>
然後把下面的 HTML 代碼放到 <body> 標籤里:
<div id="hook">
<div id="loader">
<div class="spinner"></div>
</div>
<span id="hook-text">Reloading...</span>
</div>
Hook.js 的實現其實很簡單,完整源代碼如下:
02 |
window.loadheight = $( '#hook' ).height(); |
03 |
window.hidden = $( "#hook" ).animate( "marginTop" , "-" + loadheight + "px" ); |
04 |
window.visible = $( "#hook" ).animate( "marginTop" , "0px" ); |
05 |
$( "#hook" ).css( "marginTop" , "-" + loadheight + "px" ) |
08 |
var loadheight = $( '#hook' ).height(); |
09 |
$(window).scroll( function (event) { |
10 |
var st = $(window).scrollTop(); |
15 |
$( "#hook" ).delay(500).slideUp(200, function () { |
16 |
window.location.reload() |
19 |
if ($.browser.webkit) { |
21 |
$( 'body' ).css( 'overflow' , 'hidden' ) |
您可能感興趣的相關文章
本文鏈接:Hook.js – 在傳統網頁上實現手機中的下拉刷新效果
編譯來源:夢想天空 ◆ 關注Web前端開發技術 ◆ 分享網頁設計資源