`
jjklmm
  • 浏览: 55003 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 滚动条 动态加载内容

阅读更多

<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="http://www.miiceic.org.cn/templets/js/jquery-1.3.1.js"></script>
<title>企业培训,it培训,数据库培训,android培训,嵌入式培训</title>
</head>  
   <script type="text/javascript">
    function insertcode(){
        var $body = $("body");                                                           
        $body.append('<div style=\" height:1000px; font-size:24px;\"><a href=\"http://www.miiceic.org.cn/\" target=\"_blank\">企业培训</a><br /><a href=\"http://www.amboedu.com/\" target=\"_blank\">职业教育</a><br /><a href=\"http://www.ciitn.com/\" target=\"_blank\">信息产业培训网</a><br /><a href=\"http://www.miiceic.org.cn/amt2011/\" target=\"_blank\">android PK Iphone</a><br /></div>')
        $("#page_tag_load").hide();                   
        }
    function endcode(){
        $("#page_tag_load").hide();
    }
    $(document).ready(function(){
         $(window).scroll(function () {
              var $body = $("body");
              var $html = "";
              $html += "<br/>" + ($(window).height() + $(window).scrollTop());
              $html += "<br/>window.height: " + $(window).height();
              $html += "<br/>body.height: " + $body.height();
              $html += "<br/>window.scrollTop: " + $(window).scrollTop();
              $("#page_tag_bottom").html($html);

             /*判断窗体高度与竖向滚动位移大小相加 是否 超过内容页高度*/
              if (($(window).height() + $(window).scrollTop()) >= $body.height()) {
                  $("#page_tag_load").show();
                  //setTimeout(insertcode, 1000);/*IE 不支持*/
                  if(($(window).height() + $(window).scrollTop())<3000){   
                      insertcode();
                  }
                  else{
                      endcode();   
                  }
              }
          });
      });
    </script>
</head>

<body>
    <div style="height:1000px; font-size:24px;"><a href="http://www.miiceic.org.cn/" target="_blank">企业培训</a><br /><a href="http://www.amboedu.com/" target="_blank">职业教育</a><br /><a href="http://www.ciitn.com/" target="_blank">信息产业培训网</a><br /><a href="http://www.miiceic.org.cn/amt2011/" target="_blank">Android PK Iphone</a><br /><br /><br /><a href="http://www.miiceic.org.cn/amt2011/" target="_blank">跨领域技术体验峰会</a></div>
    <div id="page_tag_bottom" style="width:100%; position:fixed; _position:absolute;top:0px; background-color:#cccccc;height:120px;"></div>
    <div id="page_tag_load" style=" display:none; font-size:14px;position:fixed; bottom:0px; background-color:#cccccc;height:50px;">加载中...</div>
</body>
</html>

分享到:
评论

相关推荐

    javascript图片随滚动条异步加载

    javascript图片随滚动条异步加载...

    拖动滚动条自动加载图片页面

    当拖动滚动条时会自动加载图片页面,由于数据量庞大,如果一次性完全加载的话,会消耗大量的带宽,通过边拖动滚动条边加载可以加载更多数据。

    JS滚动加载图片

    导入脚本 导入imgRunLoading.js脚本文件,或将其写入您的常用脚本文件中。 脚本代码片段提供未压缩和压缩过后的2种代码片段供你选择,请根据实际情况自行判断。...起效漏洞:仅对竖向滚动条起效,无视横向滚动条

    JS滚动列表加载

    参数说明 listLoadingMore({id:"",id2:function(){},...loading():根据当前滚动条的位置,自动判断是否需要加载新数据; show(boolean,boolean):强制设置加载中和加载完成dom的显示或隐藏,true表示显示,false相对。

    JavaScript实现无穷滚动加载数据

    无穷滚动就是滑动滚动条,实现数据块的无穷加载。 我们以瀑布流的布局来实现无穷加载。瀑布流就是一些等宽不等高的数据块布局。在滚动条下拉时,它会进行加载。那么问题就是在判断什么时候应该加载。 我们首先...

    【JavaScript源代码】js实现瀑布流触底动态加载数据.docx

     本文实例为大家分享了js实现瀑布流触底动态加载数据的具体代码,供大家参考,具体内容如下 // onScrollEvent 滚动条事件 &lt;div class="box" ref="box" @mousewheel="onScrollEvent"&gt; //每一个方块内的内容start...

    在博客页面图片加载的同时维持滚动条scrollbar的位置

    ScrollBear为JavaScript的工具,在博客页面图片加载的同时,维持滚动条scrollbar的位置,避免页面上下跳动。 仅使用100行代码就可以让User experience大幅提升,适合博客和新闻网站使用。

    解析javascript瀑布流原理实现图片滚动加载

    是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站...

    基于javascript实现浏览器滚动条快到底部时自动加载数据

    主要介绍了基于javascript实现浏览器滚动条快到底部时自动加载数据的相关资料,需要的朋友可以参考下

    JavaScript中关于iframe滚动条的去除和保留

    下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法。一起看看吧! iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下...

    程序天下:JavaScript实例自学手册

    12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口为活动窗口 12.17 页面随窗口的改变而改变 12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关...

    《程序天下:JavaScript实例自学手册》光盘源码

    12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口为活动窗口 12.17 页面随窗口的改变而改变 12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关...

    asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)

    分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据下面开讲: 首先说一下思路,我用的是Jquery,然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的,用到Jquery,首先要应用...

    php+ajax实现无刷新动态加载数据技术

    滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的...

    JavaScript完全自学宝典 源代码

    \ajaxmodel\src\bonze\CityServlet.java 动态加载列表框的服务器端。 \ajaxmodel\src\bonze\AutoRefServlet.java 自动刷新网页的服务器端。 \ajaxmodel\src\bonze\ProcessServlet.java 显示进度条的服务器端...

    相片播放 仿百度滚动条,仿新蛋局部放大, javascript开发 第220版

    1.在快速翻阅图片时候,滚动条尚未加载的图片显示图片正在等待加载的式样; 2.解决了键盘和鼠标同时并发操作导致的滚动条同时响应而出现滚动错误的问题; 至此,应该说开发完毕了。前前后后经历了220个版本。

    原生javascript实现图片滚动、延时加载功能

    实现效果:下拉滚动条时,图片出现在可见区域时,才开始加载 思路: (1)img标签,把真实的图片地址,放在自己设置的属性里面,如 lazy-src (2)获取img离页面的高度(在JQ里是offset().top),原生是:  img....

    javascript实现瀑布流加载图片原理

    下拉滚动条到一定位置预加载图片,滚动条拉到最底下的时候渲染html; 鼠标移到菜单,切换各个图片列表; 鼠标移到图片列表上,显示详细信息;  技术实现方案:  先梳理一下从加载到显示的流程:  1. 加载...

    基于JavaScript实现移动端无限加载分页

     3.scrollTop 视窗上面隐藏掉的部分,即滚动条滚动的距离 思路:  1.使用fixed定位加载框  2.使用$(window).scroll();方法来触发是否加载  3.通过 真实内容高度 – 视窗高度 – 上面隐藏部分 &lt; 10 ,作为加载...

    JavaScript权威指南(第6版)

    《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...

Global site tag (gtag.js) - Google Analytics