在本站前面有文章介绍了如何实现发表微博说说:PHP+Mysql+jQuery实现发布微博程序--jQuery篇,本例将基于其数据库结构,用动态的方式展示发表的说说信息。
查看示例: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://www.jb51.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中有两个函数,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>'; }
时间轴函数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中输出评论列表。
复制代码 代码如下: <div id="demo"> <?php echo $sayList;?> </div>
这样一来,运行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(); }); }); })(); });
|