在本文中，我将介紹如何在頁面上(shàng)實現動态展示用戶發表的信息，将用戶發表的信息逐條播放展示。該效果可(kě)以在展示系統動态、商品評論等場(chǎng)景應用。

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

XHTML

	
	

		 
		

			
			

				月光光 8分鍾前 說：
			

			

				評論內(nèi)容。。。
			

		

	
...

上(shàng)述HTML結構由N個(gè).saylist構成，用于展示用戶的評論信息，當然在本例中，将由PHP負責生(shēng)成這段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}

使用上(shàng)述CSS渲染HTML外觀，當然你(nǐ)也可(kě)以自己定制(zhì)你(nǐ)喜歡的外觀樣式。

PHP

在function.php中有(yǒu)兩個(gè)函數(shù)，formatSay()用來(lái)輸出用戶評論列表，即輸出上(shàng)文中的HTML。

function formatSay($say,$dt,$uid){
	$say=htmlspecialchars(stripslashes($say));

	return'

	 
	

		
		

			demo_'.$uid.' '.tranTime($dt).' 說：
		

		

			'.$say.'
		

	

	

		
	


';
}

時(shí)間(jiān)軸函數(shù)tranTime()将時(shí)間(jiān)轉換成如“1小(xiǎo)時(shí)前”的格式，詳情可(kě)閱讀本站(zhàn)文章：PHP實現時(shí)間(jiā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.'小(xiǎo)時(shí)前 '.$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ù)據庫輸出評論列表。

require_once('connect.php'); //連接數(shù)據庫文件
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中輸出評論列表。

這樣一來(lái)，運行(xíng)index.php會(huì)出現一個(gè)列表，我們隻需要一條一條展示，下面就需要jQuery來(lái)辦了。

jQuery

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