道招

[转载]JQuery实现页面随滚动条滚动而动态加载内容的效果

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

[转载]JQuery实现页面随滚动条滚动而动态加载内容的效果

新浪微博有这个功能,刚才思考一下 ,简单的写了一下实现方法,代码是Js的.

无可否认,这种方式应该算是web2.0的产物,在用户体验上具备很好的感受,除了微博在使用该方式外,另外我还发现有几个其他性质的网站也在用这种方式,原因是他们的网站页面比较长,所以用户在浏览的时候随着滚动条的拖拽而不断加载新的内容到浏览器内,虽然体验会不错,但是我感觉这种方式对搜索引擎的友好性将会降低.

所以除非不得已我是不会使用这种方式的,就目前来看我的作品内我还没发现哪个程序需要使用这种方式.

不过不论如何,创新就是一种进步,难道不是吗?

下边的代码是直接使用javascript来实现:

window.onscroll = function() {
var water = document.getElementById("water");
water.style.top = (document.documentElement.scrollTop | document.body.scrollTop) + 'px';
water.innerHTML = "scrollTop:" + (document.documentElement.scrollTop | document.body.scrollTop) + "
ClientHeight: " + document.documentElement.clientHeight + "
scrollHeight: " + document.documentElement.scrollHeight;

//滚动条在最底端的时候
if (document.documentElement.scrollHeight == (document.documentElement.scrollTop | document.body.scrollTop) + document.documentElement.clientHeight) {
    //到最底端去请求新数据
    var table = I.$('tag', 'table')[0];
    var start = parseInt(table.rows[table.rows.length - 1].cells[0].innerHTML) + 1;;
    var length = 10;
    var param = 'start=' + start + '&length=' + length;
    I.AJAX.post('/test2/DataServlet', param, function(o) {
            var persons = I.AJAX.json(o.responseText);
            //加载新的十行数据
            for (var i = 0; ih ')},function(msg){//用ajax即时获取伺服器上的资料
                if (msg.length > 0) {
                    $("#index #tab5 #tab19").last().after(msg);
                    ia = null;
                } else {
                    $("#index #div2").last().remove();
                    $("#index #tab5 #tab19").last().after('Error:没有搜寻到任何结果,请尝试更换搜寻条件!');
                }
            });
    }
}
});

原文地址:http://hi.baidu.com/see7di/blog/item/e1a7a5000b8ed495e850cd4a.html

更新时间:
上一篇:忘记表扬一下腾讯了下一篇:eclipse打开文件中文乱码

相关文章

jQuery网格插件ParamQuery

ParamQuery是一种轻量级的jQuery网格插件,基于用于用户界面控制、具有一致API的优秀设计模式 jQueryUI Widget factory 创建,能够在网页上展示各种类似于Excel和 阅读更多…

分享jquery仿apple官网伸缩弹性搜索框

代码如下 [code lang="php"] <!DOCTYPE HTML> <html> <head> <meta http-equiv=&quo 阅读更多…

取消simlple-m主题的首页伸缩效果

首页缩进的效果真的很炫,但是看着还是觉得不大好,可能是我看到很多人们的wordpress博客站都没有用这个吧,都用的是首页显示文章摘要+缩略图的做法,于是手痒,想屏蔽掉主题默认的首页文章伸缩效果吧。 阅读更多…

完美取消simlple-m主题的首页伸缩效果

你可能不喜欢 取消simlple-m主题的首页伸缩效果 里面的方法,毕竟那个方法有弊端,但是很方便。 我们知道,在simple-m主题的header.php文件里面加载了jquery.min.1 阅读更多…

Vue在chrome44偶现点击子元素事件无法冒泡

公司的一个项目大致是这样的:一个左侧列表,点击左侧列表的文章标题,右侧展开该文章对应的内容的。 现在的问题出现在极少部分客户有时左侧的标题,无法打开对应的右侧的内容,给人的改进就是‘卡’、点不动、点 阅读更多…

jQuery boxy弹出层插件简介

使用该jQuery插件 要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector",例如:"a[ 阅读更多…

关注道招网公众帐号
道招开发者二群