zoukankan      html  css  js  c++  java
  • 动态分页《查看更多》

    $(document).ready(function(){
         var range = 50;             //距下边界长度/单位px 
         var elemt = 500;           //插入元素高度/单位px 
         var maxnum = $("#newsCount").val();            //设置加载最多次数 
         var num = 1;
         var page = 1;
         var totalheight = 0;  
         var main = $("#content");                     //主体元素 
         $(window).scroll(function(){ 
             var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度) 
             totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
            
             if(($(document).height()-range) <= totalheight  && num != maxnum) {
              $.ajax({
               type:"post",
               url: "${path}/main_do/ajaxNews",
               data: {
                 page: page
                },
               dataType: "html",
               success: function(data){
                 var objs = jQuery.parseJSON(data);
                 for(var i=0;i<objs.length;i++)
                 {
                  var news = objs[i];
                 
                  main.append('<div class="index_one_news"><div class="index_one_news_img"><img src="${path }/'+news.image+'" width="182" height="109" /></div><div class="index_one_news_text"><a href="${path }/main_do/news_detail?newsId='+news.news_ID+'"><h1>'+news.title+'</h1></a><p>'+news.content+'</p><div class="index_one_news_date">'+news.publish_Date+'</div></div></div>');
                 }
               },
               error: function(){
                
               }
              });
              page++;
                 num++; 
             } 
         }); 

  • 相关阅读:
    [好好学习]在VMware中安装Oracle Enterprise Linux (v5.7)
    [冲昏头脑]IDEA中的maven项目中学习log4j的日志操作
    [烧脑时刻]EL表达式1分钟完事
    Sublime2 破解教程
    全脑瘫IT时代(八)
    全脑瘫IT时代(九)
    迁移完成
    USB Debug Cable (一)
    一个不是很常见的.Net Interop问题
    全脑瘫IT时代(十二)
  • 原文地址:https://www.cnblogs.com/dieyf/p/4273897.html
Copyright © 2011-2022 走看看