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')
}
}
})
});
本文作者:网友 来源:网络收集
CIO之家 www.ciozj.com 微信公众号:imciow