zoukankan      html  css  js  c++  java
  • JS 判断滚动底部并加载更多效果。。。。。。。。。

    JS 判断滚动底部并加载更多效果。。。。。。。。。

    <html lang="zh-cn">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>js网页滚动条滚动事件 </title>
    <style type="text/css"> 
    #top_div{ 
        position:fixed; 
        bottom:80px; 
        right:0; 
        display:none; 
    } 
    </style> 
    
    <script type="text/javascript"> 
    
    window.onscroll = function(){ 
        var t = document.documentElement.scrollTop || document.body.scrollTop;  
        var top_div = document.getElementById( "top_div" ); 
        var loading = document.getElementById("loading"); 
    
              vv.innerHTML="document.body.scrollHeight:"+document.body.scrollHeight+" body offsetHeight:"+document.body.offsetHeight;
            //scrollTop + clientHeight == scrollHeight
    
        if( document.body.scrollTop+ document.body.clientHeight >= document.body.scrollHeight) { 
    
            top_div.style.display = "inline"; 
            if(loading.style.display != "inline"){
    
                 loading.style.display = "inline";
                 count.value=(1+ parseInt(count.value));
                 setTimeout("addItem(count.value);",2000);
             }
        } 
    
    
    } 
    
    
     function addItem(i){
    
       for(var j=0;j<10;j++){
        var box = document.createElement("div"); 
    		content.appendChild(box);
    		box.style.cssText = "300px;font-size:12px;";
                    box.innerHTML="<a href='#'>..........."+ i+"</a>"
    
    
           }
    
           loading.style.display = "none";
    
       }
    
    
    
    </script> 
    
    
    </head>
    <body>
    
    
    <div id="vv"></div> 
    
    <br /> 
    
    <a name="top">顶部<a> 
    
    <div id="top_div"><a href="#top">返回顶部</a></div> 
    
    <br /> 
    
    <div id="content">
    
    <a href="#">...........</a>
    
    
    </div> 
    
    <br /> 
    
    这里尽量多些<br />以便页面出现滚动条
    
    
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    
    
    <div id="loading" style="position:fixed;bottom:20px;line-height:40px;background-color: #F00;color: #fff; display:none;">
      loaing............................................................................................................<input id="count" type='text' value="0"/>
    </div>
    
    
    </body>
    </html>
    

      

  • 相关阅读:
    C# 对Outlook2010进行二次开发
    利用AForge.NET 调用电脑摄像头进行拍照
    SQL2012 提示评估已过期 解决方案- sql server问题
    图片转换PDF
    [转载]理解weight decay
    ATTENTION NETWORK分析
    sys.stdout.write和print和sys.stdout.flush
    Flutter免费(视频)教程汇总
    Windows核心编程随笔
    .NET家族
  • 原文地址:https://www.cnblogs.com/wgscd/p/4689067.html
Copyright © 2011-2022 走看看