zoukankan      html  css  js  c++  java
  • javascript实现 滚动条滚动 加载内容

    说明:自从Bing搜索实现  滚动加载内容后,google,baidu都实现了类似的功能。

    步骤 1:  打开Visual Studio 2010  ,新建项目www.scrollpage.com.

    步骤 2:添加一个HTML文件,命名:ScrollLoadPage.html,项目引用了Jquery1.8.2框架

    步骤 3:添加代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>demo</title>
        <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
        <style type="text/css">
            div#Loadding { text-align: center; margin-top: 10px; display: none; font-weight: bold; color:Red; }
            div.content {  100%; height: 900px; border-bottom: 1px solid gray;  font-weight: bold; color:Red;text-align: center;}
        </style>
        <script type="text/javascript">
            if (!NeuF) var NeuF = {};
            NeuF.ScrollPage = function (obj, options, callback) {
                var _defaultOptions = { delay: 500, marginBottom: 100 }; //默认配置:延迟时间delay和滚动条距离底部距离marginBottom
                options = $.extend(_defaultOptions, options);
                this.isScrolling = false; //是否在滚动
                this.oriPos = 0; //原始位置
                this.curPos = 0; //当前位置
                var me = this; //顶层
                var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj);
                //绑定滚动事件
                $obj.scroll(function (ev) {
                    me.curPos = $obj.scrollTop();
                    if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) {
                        if (me.isScrolling == true) return;
                        me.isScrolling = true;
                        setTimeout(function () { me.isScrolling = false; }, options.delay);   //重复触发间隔毫秒
                        if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos);
                    };
                    me.oriPos = me.curPos;
                });
            };
            $(function () {
                window.scrollTo(0, 0); //每次F5刷新把滚动条置顶
                //marginBottom表示滚动条离底部的距离,0表示滚动到最底部才加载,可以根据需要修改  
                new NeuF.ScrollPage(window, { delay: 1000, marginBottom: 0 }, function (offset) {
                    if (offset > 0) {
                        $("#Loadding").show(); //加载提示
                        setTimeout(function () {
                            //这里就是异步获取内容的地方,这里简化成一句话,可以根据需要修改
                            $("#divContainer").append($("<div class='content'>第“" + ($(".content").size() + 1) + "”页内容</div>"));
                            //内容获取后,隐藏加载提示
                            $("#Loadding").hide();
                        }, 1000);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="divContainer">
            <div class="content">
                这里是内容,尝试滚动,加载下一页内容。如果是大屏幕显示器,<br />请把CSS div.content 高度调高,以便看到滚动效果 </div>
        </div>
        <div id="Loadding">
            正在加载,请稍候 ...</div>
    </body>
    </html>

    步骤 4: 在浏览器中查看ScrollLoadPage.html。

    下面给出了项目源码   :

    https://files.cnblogs.com/HCCZX/www.scrollpage.com.rar

  • 相关阅读:
    指定一个M3U8文件,判断它包含的TS文件是不是都存在。指定一个Office生成的Swf文件,判断它包含的Swf文件是不是完整都存在。
    东师理想云平台异步任务处理系统V2.0重构思路
    Mysql查询出所有列名
    IntelliJ IDEA添加jar包
    IDEA下利用Jrebel插件实现JFinal项目main方法【热加载】
    整理OpenResty+Mysql+Tomcat+JFinal+Cannal+HUI
    有没有 linux 命令可以获取我的公网 ip, 类似 ip138.com 上获取的 ip?
    MongoDB学习笔记(5)--document
    MongoDB学习笔记(4)--collection
    MongoDB学习笔记(3)--删除数据库
  • 原文地址:https://www.cnblogs.com/HCCZX/p/2834130.html
Copyright © 2011-2022 走看看