滚动条到底部时自己加载新的内容

来源：互联网发布：2016我国旅游业数据编辑：程序博客网时间：2024/05/21 16:59

方案一：

<!DOCTYPE html><html lang="en">    <head>      <meta charset="gb2312">      <title>滚动条到底部时自己加载新的内容</title>      <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>      <script type="text/javascript">          var page_num=2;          $(document).ready(function(){            $(window).scroll(function(){              if($(document).scrollTop()>=$(document).height()-$(window).height()){                var div1tem = $('#container').height()                var str =''                $.ajax({                    type:"GET",                    url:'ajaxdata.php',                    dataType:'json',                    beforeSend:function(){                      $('.ajax_loading').show() //显示加载时候的提示                    },                    success:function(ret){                     $(".after_div").before(ret) //将ajxa请求的数据追加到内容里面                     $('.ajax_loading').hide() //请求成功,隐藏加载提示                    }                })              }            })          })       </script>    </head>    <body>     <div>        <div style='width:100%;height:1200px'>文章内容</div>        <div class='after_div'></div> <div class='ajax_loading' style='background:#F0F0F0;height:60px;width:100%;text-align:center;line-height:60px;font-size:18px;display:none;position:fixed;bottom:0px'><img src="img/loadinfo.net.gif"> 数据加载中 </div>     </div>    </body></html>

方案二：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现当拉动滚动条到底部加载数据</title><style type="text/css">*{margin:0;padding:0;}body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;}a{color:#444;text-decoration: none;}a:hover{color:#065BC2;text-decoration: none;}.clear{clear:both;}img{border:none;vertical-align: middle;}ul{list-style: none;}</style></head><body><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script type="text/javascript">var totalheight = 0; function loadData(){    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());     if ($(document).height() <= totalheight)    {        //加载数据        $("#container").append($(document).scrollTop()+"<br/>");    }} $(window).scroll( function() {    console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());    console.log("页面的文档高度 ："+$(document).height());    console.log('浏览器的高度：'+$(window).height());    loadData();});</script></head><body>    <div id="container">        dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>    </div></body></html>

0 0