Hook.js – 在傳統網頁上實現手機中的下拉刷新效果

  我們都很喜歡移動設備上的“下拉刷新”功能,那麼如果這個效果應用到傳統網頁上怎麼樣?嗯,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 的實現其實很簡單,完整源代碼如下:

01 $(function () {
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")
06 });
07 $(function hook() {
08     var loadheight = $('#hook').height();
09     $(window).scroll(function (event) {
10         var st = $(window).scrollTop();
11         if (st <= 0) {
12             $("#hook").animate({
13                 "marginTop""0px"
14             }, 200);
15             $("#hook").delay(500).slideUp(200, function () {
16                 window.location.reload()
17             })
18         }
19         if ($.browser.webkit) {
20             if (st == 0) {
21                 $('body').css('overflow''hidden')
22             }
23         }
24     })
25 });

 

您可能感興趣的相關文章

本文鏈接:Hook.js – 在傳統網頁上實現手機中的下拉刷新效果

編譯來源:夢想天空 ◆ 關注Web前端開發技術 ◆ 分享網頁設計資源

 
原文網站 / 轉載自: 夢想天空

要得知最新科技消息,請留意派亞普科技創見!

Categories: