index.php代碼
[html] view plaincopy
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= " http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= " Content-Type " content= " text/html; charset=utf-8 " />
<title>滾屏加載--無刷新動態加載數據技術的應用-www.corange.cn</title>
<style type= " text/css ">
#container{margin:10px auto;width: 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{width: 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>
</head>
<?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] view plaincopy在CODE上查看代碼片派生到我的代碼片
<?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] view plaincopy在CODE上查看代碼片派生到我的代碼片
<?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 ");
?>
[html] view plaincopy
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= " http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= " Content-Type " content= " text/html; charset=utf-8 " />
<title>滾屏加載--無刷新動態加載數據技術的應用-www.corange.cn</title>
<style type= " text/css ">
#container{margin:10px auto;width: 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{width: 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>
</head>
<?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] view plaincopy在CODE上查看代碼片派生到我的代碼片
<?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] view plaincopy在CODE上查看代碼片派生到我的代碼片
<?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 ");
?>