Hook.js – 在传统网页上实现手机中的下拉刷新效果

  我们都很喜欢移动设备上的“下拉刷新”功能,那么如果这个效果应用到传统网页上怎么样?嗯,Hook.js 可以实现。他们采用了手机和平板电脑中的这个创新,只要向下滚动了一下,然后弹回到顶部,页面就会自动刷新。

您可能感兴趣的相关文章

 

在线演示(需要FQ)      源码下载

 

  Hook.js 使用非常简单,首先引入下面三个文件:

1
2
3
<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> 标签里:

1
2
3
4
5
6
<div id="hook">
    <div id="loader">
        <div class="spinner"></div>
    </div>
    <span id="hook-text">Reloading...</span>
</div>  

   Hook.js 的实现其实很简单,完整源代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(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前端开发技术 ◆ 分享网页设计资源

posted @   梦想天空(山边小溪)  阅读(49858)  评论(5编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
历史上的今天:
2011-03-08 在EditPlus中使用JSLint校验JavaScript代码
2011-03-08 分享50个优秀的免费英文手写字体
点击右上角即可分享
微信分享提示