Hook.js – 在傳統網頁上實現手機中的下拉刷新效果 | Anchor Point 定點互動 | iOS, Android Mobile Apps and Web Development in Hong Kong

　　我們都很喜歡移動設備上的“下拉刷新”功能，那麼如果這個效果應用到傳統網頁上怎麼樣？嗯，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
});