PHP+Mysql+jQuery实现动态展示信息

在本文中,我将介绍如何在页面上实现动态展示用户发表的信息,将用户发表的信息逐条播放展示。该效果可以在展示系统动态、商品评论等场景应用。

在本站前面有文章介绍了如何实现发表微博说说:,本例将 基于其数据库结构,用动态的方式展示发表的说说信息。

HTML

  1. <div id="demo"> 
  2.     <div class="saylist"> 
  3.         <a href="#"><img src="images/0.jpg" width="50" height="50" alt="demo" /></a> 
  4.         <div class="saytxt"> 
  5.            <p><strong><a href="#">似水星辰</a></strong><span> 
  6. 8分钟前</span> 说:</p> 
  7.            <div class="say">评论内容。。。</div> 
  8.         </div> 
  9.     </div> 
  10.     ... 
  11. </div> 

上述HTML结构由N个.saylist构成,用于展示用户的评论信息,当然在本例中,将由PHP负责生成这段XHTML代码。

CSS

  1. #demo{width:400pxheight:80pxmargin:80px autoborder-bottom:1px dotted #d3d3d3
  2. .saylist{margin:8px autoheight:80pxpadding:4px 0;} 
  3. .saylist img{float:leftwidth:50pxmargin:4px
  4. .saytxt{float:rightwidth:320pxoverflow:hidden
  5. .saytxt p{line-height:18px
  6. .saytxt p strong{margin-right:6px
  7. .saytxt p span{color:#999
  8. .say{margin-top:3pxfont-size:14pxfont-weight:bold

使用上述CSS渲染HTML外观,当然你也可以自己定制你喜欢的外观样式。

PHP

  1. function formatSay($say,$dt,$uid){  
  2.     $say=htmlspecialchars(stripslashes($say));  
  3.   
  4.     return'  
  5.     <div class="saylist"><a href="#"><img src="images/'.$uid.'.jpg" width="50"  
  6.  height="50" alt="demo" /></a>  
  7.     <div class="saytxt">  
  8.     <p><strong><a href="#">demo_'.$uid.'</a></strong>  <span>'.tranTime($dt).'</span> 说:  
  9.     </p><div class="say">'.$say.'</div>  
  10.     </div>  
  11.     <div class="clear"></div>  
  12.     </div>';  
  13. }  

时间轴函数tranTime()将时间转换成如“1小时前”的格式,详情可阅读本站文章:

  1. function tranTime($stime) { 
  2.     $rtime = date("m-d H:i",$stime); 
  3.     $htime = date("H:i",$stime); 
  4.  
  5.     $day_time = date("j",$stime); 
  6.     $today=date("j",time()); 
  7.     $ds = $today - $day_time
  8.  
  9.     $time = time() - $stime
  10.  
  11.     if ($time < 60) { 
  12.         $str = '刚刚'
  13.     } 
  14.     elseif ($time < 60 * 60) { 
  15.         $min = floor($time/60); 
  16.         $str = $min.'分钟前'
  17.     } 
  18.     elseif ($time < 60 * 60 * 24) { 
  19.         $h = floor($time/(60*60)); 
  20.         $str = $h.'小时前 '.$htime
  21.         if($ds==1) 
  22.           $str = '昨天 '.$rtime
  23.     } 
  24.     elseif ($time < 60 * 60 * 24 * 2) { 
  25.         $str = '昨天 '.$rtime
  26.         if($ds==2) 
  27.            $str = '前天 '.$rtime
  28.     }elseif($time < 60 * 60 * 24 * 3){ 
  29.         $str = '前天 '.$rtime
  30.         if($ds>2) 
  31.            $str = $rtime
  32.     } 
  33.     else { 
  34.         $str = $rtime
  35.     } 
  36.     return $str

在function.php中有两个函数,formatSay()用来输出用户评论列表,即输出上文中的HTML。

然后在index.php中调用funciton.php,并连接MySQL数据库输出评论列表。

  1. require_once('connect.php'); //连接数据库文件 
  2. require_once('function.php'); //函数文件 
  3.  
  4. $query=mysql_query("select * from say order by id desc limit 0,15"); 
  5. while ($row=mysql_fetch_array($query)) { 
  6.     $sayList.=formatSay($row[content],$row[addtime],$row[userid]); 

在div#demo中输出评论列表。

  1. <div id="demo"> 
  2.      <?php echo $sayList;?> 
  3. </div> 

这样一来,运行index.php会出现一个列表,我们只需要一条一条展示,下面就需要jQuery来办了。

jQuery

  1. $(function(){ 
  2.     //除了显示第一个saylist,其他的都隐藏 
  3.     $(".saylist").hide().eq(0).show(); 
  4.     //自循环函数,循环展示信息 
  5.     (function showNextSay(){ 
  6.         //每条信息展示7.5秒 
  7.         $(".saylist:visible").delay(7500).fadeOut("slow",function(){ 
  8.             $(this).appendTo("#demo"); 
  9.             //展示下一条 
  10.             $(".saylist:first").fadeIn("slow",function(){ 
  11.                 //再次调用函数 
  12.                 showNextSay(); 
  13.             }); 
  14.         }); 
  15.     })(); 
  16. }); 

转载请注明:代码家园 » PHP+Mysql+jQuery实现动态展示信息

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)