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 的实现其实很简单，完整源代码如下：

$(function () {
  window.loadheight = $('#hook').height();
  window.hidden = $("#hook").animate("marginTop", "-" + loadheight + "px");
  window.visible = $("#hook").animate("marginTop", "0px");
  $("#hook").css("marginTop", "-" + loadheight + "px")
});
$(function hook() {
  var loadheight = $('#hook').height();
  $(window).scroll(function (event) {
    var st = $(window).scrollTop();
    if (st <= 0) {
     $("#hook").animate({
    "marginTop": "0px"
     }, 200);
     $("#hook").delay(500).slideUp(200, function () {
     window.location.reload()
   })
 }
   if ($.browser.webkit) {
    if (st == 0) {
     $('body').css('overflow', 'hidden')
    }
   }
 })
});

http://pan.baidu.com/s/1kTvoSmj

http://www.cnblogs.com/lhb25/archive/2013/03/08/pull-to-refresh-for-the-web-with-hook-js.html