PHP+Mysql+jQuery實現(xiàn)動態(tài)展示信息

更新時間：2011年10月08日 23:26:57 作者：

在本文中，我將介紹如何在頁面上實現(xiàn)動態(tài)展示用戶發(fā)表的信息，將用戶發(fā)表的信息逐條播放展示。該效果可以在展示系統(tǒng)動態(tài)、商品評論等場景應用

在本站前面有文章介紹了如何實現(xiàn)發(fā)表微博說說：PHP+Mysql+jQuery實現(xiàn)發(fā)布微博程序--jQuery篇，本例將基于其數(shù)據(jù)庫結構，用動態(tài)的方式展示發(fā)表的說說信息。

查看示例：DEMO

XHTML

復制代碼代碼如下:

 
<div id="demo"> 
<div class="saylist"> 
<a href="#"><img src="images/0.jpg" width="50" height="50" alt="demo" /></a> 
<div class="saytxt"> 
<p><strong><a href="http://m.fzitv.net">Shuro</a></strong><span> 
8分鐘前</span> 說：</p> 
<div class="say">評論內容。。。</div> 
</div> 
</div> 
... 
</div> 

上述HTML結構由N個.saylist構成，用于展示用戶的評論信息，當然在本例中，將由PHP負責生成這段XHTML代碼。
CSS

復制代碼代碼如下:

 
#demo{width:400px; height:80px; margin:80px auto; border-bottom:1px dotted #d3d3d3} 
.saylist{margin:8px auto; height:80px; padding:4px 0;} 
.saylist img{float:left; width:50px; margin:4px} 
.saytxt{float:right; width:320px; overflow:hidden} 
.saytxt p{line-height:18px} 
.saytxt p strong{margin-right:6px} 
.saytxt p span{color:#999} 
.say{margin-top:3px; font-size:14px; font-weight:bold} 

使用上述CSS渲染HTML外觀，當然你也可以自己定制你喜歡的外觀樣式。
PHP
在function.php中有兩個函數(shù)，formatSay()用來輸出用戶評論列表，即輸出上文中的HTML。

復制代碼代碼如下:

 
function formatSay($say,$dt,$uid){ 
$say=htmlspecialchars(stripslashes($say)); 
return' 
<div class="saylist"><a href="#"><img src="images/'.$uid.'.jpg" width="50" 
height="50" alt="demo" /></a> 
<div class="saytxt"> 
<p><strong><a href="#">demo_'.$uid.'</a></strong> <span>'.tranTime($dt).'</span> 說： 
</p><div class="say">'.$say.'</div> 
</div> 
<div class="clear"></div> 
</div>'; 
} 

時間軸函數(shù)tranTime()將時間轉換成如“1小時前”的格式，詳情可閱讀本站文章：PHP實現(xiàn)時間軸函數(shù)

復制代碼代碼如下:

 
function tranTime($stime) { 
$rtime = date("m-d H:i",$stime); 
$htime = date("H:i",$stime); 
$day_time = date("j",$stime); 
$today=date("j",time()); 
$ds = $today - $day_time; 
$time = time() - $stime; 
if ($time < 60) { 
$str = '剛剛'; 
} 
elseif ($time < 60 * 60) { 
$min = floor($time/60); 
$str = $min.'分鐘前'; 
} 
elseif ($time < 60 * 60 * 24) { 
$h = floor($time/(60*60)); 
$str = $h.'小時前 '.$htime; 
if($ds==1) 
$str = '昨天 '.$rtime; 
} 
elseif ($time < 60 * 60 * 24 * 2) { 
$str = '昨天 '.$rtime; 
if($ds==2) 
$str = '前天 '.$rtime; 
}elseif($time < 60 * 60 * 24 * 3){ 
$str = '前天 '.$rtime; 
if($ds>2) 
$str = $rtime; 
} 
else { 
$str = $rtime; 
} 
return $str; 
} 

然后在index.php中調用funciton.php，并連接MySQL數(shù)據(jù)庫輸出評論列表。

復制代碼代碼如下:

 
require_once('connect.php'); //連接數(shù)據(jù)庫文件 
require_once('function.php'); //函數(shù)文件 
$query=mysql_query("select * from say order by id desc limit 0,15"); 
while ($row=mysql_fetch_array($query)) { 
$sayList.=formatSay($row[content],$row[addtime],$row[userid]); 
} 

在div#demo中輸出評論列表。

復制代碼代碼如下:

 
<div id="demo"> 
<?php echo $sayList;?> 
</div> 

這樣一來，運行index.php會出現(xiàn)一個列表，我們只需要一條一條展示，下面就需要jQuery來辦了。
jQuery

復制代碼代碼如下:

 
$(function(){ 
//除了顯示第一個saylist,其他的都隱藏 
$(".saylist").hide().eq(0).show(); 
//自循環(huán)函數(shù)，循環(huán)展示信息 
(function showNextSay(){ 
//每條信息展示7.5秒 
$(".saylist:visible").delay(7500).fadeOut("slow",function(){ 
$(this).appendTo("#demo"); 
//展示下一條 
$(".saylist:first").fadeIn("slow",function(){ 
//再次調用函數(shù) 
showNextSay(); 
}); 
}); 
})(); 
}); 