Ross Wan's World!

Python, Ajax, PHP and Linux.

jQuery:实现网页滚动时动态更新内容

Posted by Ross Wan 于 2008/08/28

      用过 Google Reader 的人都会发觉,当我们阅读的时候,浏览器的滚动条到达底端,新的内容会自动更新到网页的底端。或者看看这个示例,会有更清晰的了解:http://www.webresourcesdepot.com/dnspinger/

注:将上面示例的网页滚动到底端就会看到效果。

      下面,将用 jQuery 来简单实现这个有趣的效果。

      我们将更新的内容放于 Divs 内,下面是其结构:

<div class=”wrdLatest” id=9>content</div>
<div class=”wrdLatest” id=8>content</div>
<div id=”lastPostsLoader”></div>

      下面创建的 lastPostFunc 方法,使用 ajax 向服务器发送一个更新内容的请求,同时将最后一个 Div 的 id 传递过去,并且放置一个“正在加载”的图片。

function lastPostFunc()
{
    $(’div#lastPostsLoader’).html(’<img src=”bigLoader.gif”>’);
    $.post(“scroll.asp?action=getLastPosts&lastID=” + $(“.wrdLatest:last”).attr(“id”),   

    function(data){
        if (data != “”) {
        $(“.wrdLatest:last”).after(data);          
        }
        $(’div#lastPostsLoader’).empty();
    });
};

      当用户滚动网页到底端就会触发 lastPostFunc 方法:

$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() – $(window).height()){
           lastPostFunc();
        }
});

注意:代码中使用到 jQuery 的 Dimensions 插件,或者使用 jQuery 1.2.6+,因为已集成了该插件。

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

 
%d 博主赞过: