首页  ·  知识 ·  前端
Hook.js–在传统网页上实现手机中的下拉刷新
网友  收集  综合  编辑:dezai   图片来源:网络
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')
            }
        }
    })
});

本文作者:网友 来源:网络收集
CIO之家 www.ciozj.com 微信公众号:imciow
    >>频道首页  >>网站首页   纠错  >>投诉
版权声明:CIO之家尊重行业规范,每篇文章都注明有明确的作者和来源;CIO之家的原创文章,请转载时务必注明文章作者和来源;
延伸阅读
也许感兴趣的
我们推荐的
主题最新
看看其它的