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')              }          }      })  });

 

您可能感興趣的相關文章

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

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


想在手機閱讀更多網站設計及開發資訊?下載【香港矽谷】Android應用
分享到Facebook
技術平台: Nasthon Systems