我們都很喜歡移動設備上的“下拉刷新”功能，那么如果這個效果應用到傳統網頁上怎么樣？嗯，Hook.js 可以實現。他們采用了手機和平板電腦中的這個創新，只要向下滾動了一下，然后彈回到頂部，頁面就會自動刷新。
您可能感興趣的相關文章
- 使用 Toolbar.js 實現超酷的 Tooltip 風格工具欄
- Textillate.js – 實現 CSS3 文本動畫的簡單插件
- 使用 ThreeSixty 創建 360 度全景圖片預覽效果
- 實用錦囊：推薦一款非常棒的響應式網頁測試工具
- 令人印象深刻的 jQuery 模態框插件 – iLightBox
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')
}
}
})
});
您可能感興趣的相關文章
- Respond.js – 讓IE6-8支持 CSS3 Media Query
- Debuggex – 超好用的正則表達式可視化調試工具
- 前端文摘——網頁圖片優化的實用工具和技巧分享
- Lazy Line Painter – 有趣的 jQuery 路徑動畫插件
- Zepto.js – 為現代瀏覽器而生的輕量JavaScript庫