Hook.js – 在传统网页上实现手机中的下拉刷新效果
我们都很喜欢移动设备上的“下拉刷新”功能，那么如果这个效果应用到传统网页上怎么样？嗯，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库
