zoukankan      html  css  js  c++  java
  • Jquery+php鼠标滚动到页面底部自动加载更多内容,使用分页

    1.index.php 

      <style type="text/css">  
                #container{margin:10px auto; 660px; border: 1px solid #999;}   
                .single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;}  
                .author{position: absolute; left: 0px; font-weight:bold; color:#39f}  
                .date{position: absolute; right: 0px; color:#999}  
                .content{line-height:20px; word-break: break-all;}  
                .element_head{ 100%; position: relative; height: 20px;}  
                .nodata{display:none; height:32px; line-height:32px; text-align:center; color:#999; font-size:14px}  
            </style>  
            <script type="text/javascript" src="../jquery.js"></script>  
            <script type="text/javascript">  
                $(function() {  
                    var winH = $(window).height(); //页面可视区域高度  
                    var i = 1;  
                    $(window).scroll(function() {  
                        var pageH = $(document.body).height();  
                        var scrollT = $(window).scrollTop(); //滚动条top  
                        var aa = (pageH - winH - scrollT) / winH;  
                        if (aa < 0.02) {  
                            $.getJSON("result.php", {page: i}, function(json) {  
                                if (json) {  
                                    var str = "";  
                                    $.each(json, function(index, array) {  
                                        var str = "<div class="single_item"><div class="element_head">";  
                                        var str = str + "<div class="date">" + array['date'] + "</div>";  
                                        var str = str + "<div class="author">" + array['author'] + "</div>";  
                                        var str = str + "</div><div class="content">" + array['content'] + "</div></div>";  
                                        $("#container").append(str);  
                                    });  
                                    i++;  
                                } else {  
                                    $(".nodata").show().html("别滚动了,已经到底了。。。");  
                                    return false;  
                                }  
                            });  
                        }  
                    });  
                });  
            </script>  
     
        <?php   
        require_once('connect.php');   
        $user = array('demo1','demo2','demo3','demo3','demo4');   
        ?>   
        <div id="container">   
            <?php   
            $query=mysql_query("select * from comments order by id desc limit 0,15");   
            while ($row=mysql_fetch_array($query)) {   
            ?>   
            <div class="single_item">   
                <div class="element_head">   
                    <div class="date"><?php echo date('m-d H:i',$row['addtime']);?></div>   
                    <div class="author"><?php echo $user[$row['userid']];?></div>   
                </div>   
                <div class="content"><?php echo $row['content'];?></div>   
            </div>   
            <?php } ?>   
        </div>   
        <div class="nodata"></div>   

    result.php代码

    <?php  
    require_once('connect.php'); //连接数据库   
       
    $user = array('demo1','demo2','demo3','demo3','demo4');   
    $page = intval($_GET['page']);  //获取请求的页数   
    $start = $page*15;   
    $query=mysql_query("select * from comments order by id desc limit $start,15");   
    while ($row=mysql_fetch_array($query)) {   
        $arr[] = array(   
            'content'=>$row['content'],   
            'author'=>$user[$row['userid']],   
            'date'=>date('m-d H:i',$row['addtime'])   
        );   
    }   
    echo json_encode($arr);  //转换为json数据输出   
    ?>  

    connect.php代码

    <?php  
    $host="localhost";  
    $db_user="root";  
    $db_pass="";  
    $db_name="demo";  
    $timezone="Asia/Shanghai";  
      
    $link=mysql_connect($host,$db_user,$db_pass);  
    mysql_select_db($db_name,$link);  
    mysql_query("SET names UTF8");  
    ?> 
  • 相关阅读:
    9.11 eventbus
    9.10,,,实现new instanceof apply call 高阶函数,偏函数,柯里化
    9.9 promise实现 写完了传到gitee上面了,这里这个不完整
    9.5cors配置代码
    9.5 jsonp 实现
    9.5 http tcp https总结
    9.3 es6 class一部分 and es5 class 发布订阅
    8.30 cookie session token jwt
    8.30vue响应式原理
    warning: LF will be replaced by CRLF in renard-wx/project.config.json. The file will have its original line endings in your working directory
  • 原文地址:https://www.cnblogs.com/smedas/p/12712666.html
Copyright © 2011-2022 走看看