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

最新推荐文章于 2024-08-13 02:47:14 发布

dyl_love98

最新推荐文章于 2024-08-13 02:47:14 发布

阅读量806

点赞数

文章标签：实现网页

本文链接：https://blog.csdn.net/javablogs/article/details/8912406

版权

每日一贴,今天的内容关键字为实现网页

我们都很欢喜移动设备上的“下拉刷新”功能，那么如果这个效果应用到传统网页上怎么样？嗯，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')
            }
        }
    })
});

您可能感兴致的关相文章