欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > PHP >

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

发布时间:2015-08-09  编辑:杨雨个人博客网站   点击:   

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

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

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

HTML

<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.helloweba.com">月光光</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();
			});
		});
	})();
});
本文地址:http://itbyc.com/php/3015.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1