在本站前面有文章介紹了如何?發表微博說說：PHP+Mysql+jQuery實現發布微博程式--jQuery篇，本例將基於其資料庫結構，用動態方式展示發表的說說資訊。
查看樣本：DEMO
XHTML
複製代碼 代碼如下:
Shuro
8分鐘前 說：
評論內容。。。
...
上述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中有兩個函數，formatSay()用來輸出使用者評論列表，即輸出上文中的HTML。
複製代碼 代碼如下:
function formatSay($say,$dt,$uid){
$say=htmlspecialchars(stripslashes($say));
return'
height="50" alt="demo" />
demo_'.$uid.' '.tranTime($dt).' 說：
'.$say.'
';
}
時間軸函數tranTime()將時間轉換成如“1小時前”的格式，詳情可閱讀本站文章：PHP實現時間軸函數
複製代碼 代碼如下:
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資料庫輸出評論列表。
複製代碼 代碼如下:
require_once('connect.php'); //串連資料庫檔案
require_once('function.php'); //函數檔案
$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中輸出評論列表。
複製代碼 代碼如下:
這樣一來，運行index.php會出現一個列表，我們只需要一條一條展示，下面就需要jQuery來辦了。
jQuery
複製代碼 代碼如下:
$(function(){
//除了顯示第一個saylist,其他的都隱藏
$(".saylist").hide().eq(0).show();
//自迴圈函數，迴圈展示資訊
(function showNextSay(){
//每條資訊展示7.5秒
$(".saylist:visible").delay(7500).fadeOut("slow",function(){
$(this).appendTo("#demo");
//展示下一條
$(".saylist:first").fadeIn("slow",function(){
//再次調用函數
showNextSay();
});
});
})();
});
http://www.bkjia.com/PHPjc/324369.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/324369.htmlTechArticle在本站前面有文章介紹了如何?發表微博說說：PHP+Mysql+jQuery實現發布微博程式--jQuery篇，本例將基於其資料庫結構，用動態方式展示發...
