zoukankan      html  css  js  c++  java
  • Jquery 无限往下滚动

    这是仿照腾讯的微薄上的一个效果。滚动条可以无限的网下滚动并且无刷不断从数据库中获取新的数据。

      <style type="text/css">
       body{ font-family: "Trebuchet MS",verdana,arial;}
       #loading{ display:none; font-weight:bold;color:#FF0000;}
       p { padding:10px;}
      </style>
    
    <p id="loading">loading data... </p> 
    
    $(function(){ 
         var isOK=true;//记录上次访问是否已经结束,如果ajax也有线程就好了 
         var scrollH=0;//判断是往上滚还是往下滚 
         var  intI=1; 
      
        // loading层是固定在页脚的记录牌 
      
         $(".loading").css({"right":"2","bottom":0}); 
         $(".loading") 
         .ajaxStart(function(){ 
            isOK=false;//执行ajax的时候把isOK设置成false防止第一次没有执行完的情况下执行第二次易出错 
            $("#loading2").show(); 
              }) 
         .ajaxStop(function(){ 
             isOK=true; 
              $("#loading2").hide(); 
             }) 
          
        $(window).scroll(function(){ 
         //控制load层      
          document.getElementByIdx_x_x("loading").style.top=document.documentElement.scrollTop+"px"; 
            //触法ajax条件  可以换算成百分比更好 
       if($(document).height()-$(window).scrollTop()-document.documentElement.clientHeight<240){ 
          //当前位置比上次的小就是往上滚动不要执行ajax代码块 
          if(scrollH>document.documentElement.scrollTopY) 
          { 
            $(".loading").append("<br/>向上滚不执行") 
            scrollH=document.documentElement.scrollTop;//记录新位置 
           return; 
           } 
          if(isOK)//如果是第一次或者上次执行完成了就执行本次 
          { 
      
             scrollH=document.documentElement.scrollTop;//记录新位置 
             $(".loading").append("<br/>~~<span style='background:#red'>执行了ajax。。。。。</span><br/>") 
             isOK=false; 
          $.ajax({ 
              type:"POST", 
              dataType: 'xml', 
              url:"http://localhost:49302/MY100/2010/WebService1.asmx/getDS", 
              error:function(e){ 
                $(".main").append('发生了错误:'+e) 
               }, 
              success:function(data){ 
               try{ 
                $(data).find("Table").each(function(i){ 
                      $(".main").append("结果:"+$(this).children('txtTitle').text()+"<br/>");  
                      $(".main").append("结果:"+$(this).children('txtBody1').text()+"<br/>");  
                      $(".main").append("结果:"+$(this).children('txtBody2').text()+"<br/>");  
                      $(".main").append("结果:"+$(this).children('txtBody3').text()+"<br/>"); 
                      $(".main").append("结果:"+$(this).children('txtBody4').text()+"<br/>"); 
                      $(".main").append("结果:"+$(this).children('ID').text()+"<br/>"); 
                      })//each 
                } 
               catch(e){ 
                 $(".main").append("<p>"+e+"</p>") 
                } 
               }//success 
              })//ajax 
             }//if(isOK) 
             else
             { 
               $(".loading").append("<br/>~~你是向下滚了,但是上次还没有执行完毕,等等吧<br/>") 
              } 
          }// 触法ajax条件   
         })//scroll 
        })//Jquery 结束处 
    
  • 相关阅读:
    【Qt】Qt5.12连接MySQl5.7(亲自测试成功)
    【Qt】Qt5.12编译MySQl5.7驱动(亲自测试成功)
    【网络安全】十三款流行无线黑客工具介绍
    微信公众号教程(15)公司通讯录开发 下
    微信公众号教程(14)公司通讯录开发 中
    微信公众号教程(13)公司通讯录开发 上
    微信公众号教程(12)公众账号接收非文字消息 下
    微信公众号教程(11)公众账号接收非文字消息 上
    微信公众号教程(10)公众账号自定义回复功能
    微信公众号教程(9)公众账号发送欢迎图文消息
  • 原文地址:https://www.cnblogs.com/Fooo/p/2616334.html
Copyright © 2011-2022 走看看