使用基于ThinkPHP3.2.3的ThinkAdmin创建手机电脑通用的表白墙（四）实现弹幕
90后主要是通过视频获取信息、娱乐的一代，各大主流的在线视频播放器都实现了弹幕功能，并且我们用的还乐此不疲，真的挺好玩。
通过代码来实现弹幕的思路：在数据库读取信息,显示在界面上。这个界面是弹幕样式的，每一条的颜色都不一样，所以要随机生成颜色代码，还包括字体、字体大小、位置、动画的速度。这样只是死的弹幕，因为只有界面刷新一下才能换成下一波，以后实现使用ajax完成无刷更新弹幕。
1.数据部分
数据库：
字段id,
表白内容title,
昵称user_name,
时间time,
IP地址ip,
是否审核type,(1代表通过、2代表未过、3代表等待审核,表白信息一创建就要设置为3)
Thinkphp的M部分
thinkadmin的model目录的文件都是些验证规则，这里不需要过滤就不创建文件了。
2.Controller
Home/Controller/IndexController.class.php
<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller{
/*
*电脑端只提供弹幕和微信平台二维码
*
*/
public function index(){
$SayLove = M('Saylove');
//显示已经通过审核的表白
$wall = $SayLove->limit(10)->order('rand()')->where('type=1')->select();
//ThinkPHP的连贯操作 随机选择十条已经审核的表白信息
foreach ($wall as &$love) {
//遍历结果集，添加颜色、速度等随机产生的字段
$love['color'] = $this->randomColor();//弹幕的颜色代码
$love['fontsize'] = rand(10,50);//弹幕的字体大小
$love['begin'] = strval(rand(0,10)).'s';//弹幕开始时间
$love['dur'] = strval(rand(9,15)).'s';//弹幕速度
}
$this->assign('wall',$wall);//替换view中的变量
$this->display(); //渲染界面
}
public function randomColor(){
//随机生成弹幕的颜色代码
$str = '#';
for($i = 0 ; $i < 6 ; $i++){
$randNum = rand(0 , 15);
switch ($randNum) {
case 10: $randNum = 'A'; break;
case 11: $randNum = 'B'; break;
case 12: $randNum = 'C'; break;
case 13: $randNum = 'D'; break;
case 14: $randNum = 'E'; break;
case 15: $randNum = 'F'; break;
}
$str .= $randNum;
}
return $str;
}
}
BaseController.class.php
3.View部分
Home/View/Index/index.html
<include file="Public:header"/>
<div class="container js_container">
</div>
<script type="text/html" id="tpl_home">
<div class="hd">
<h1 class="page_title">表白墙</h1>
<p class="page_desc">为"有贼心,没贼胆"的你量身设计</p>
</div>
<p class="page_desc">关注公众平台去表白:<br> <img src="__STATIC__/mpweixin.jpg" height="130"width="130"></img> <br>Powered By 滨州学院信息工程系.</p>
</script>
<volist name="wall" id="love">
<svg width="1500" height="50" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;">
<text font-family="microsoft yahei" font-size="{$love.fontsize}" y="40" x="-28.4475" fill="{$love.color}" style="box-sizing: border-box;">
{$love.user_name}:{$love.title}
<animate attributename="x" from="800" to="-400" begin="{$love.begin}" dur="{$love.dur}" repeatcount="indefinite" style="box-sizing: border-box;"></animate>
</text>
</svg>
</volist>
<include file="Public:footer"/>Volist标签主要用于在模板中循环输出数据集或者多维数组。是ThinkPHP的内置标签。变量替换格式{$VolistID.数据库对应的字段}
页面的head与foot统一定义在了Home/View/Public/下，一些公共的css、js等也可以放在这里。
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{$title}</title>
<link rel="stylesheet" href="__STATIC__/css/style.css">
<script type="text/javascript" src="__STATIC__/js/init.js"></script>
<link rel="stylesheet" href="__STATIC__/css/weui.css"/>
<link rel="stylesheet" href="__STATIC__/css/example.css"/>
<script src="__STATIC__/js/zepto.min.js"></script>
<script src="__STATIC__/js/example.js"></script>
</head>
<body>
footer.html
</body> </html>页面中的变量__STATIC__是在Home/Conf/config.php中定义的
<?php
return array(
//主题静态文件路径
'TMPL_PARSE_STRING' => array(
'__STATIC__' => __ROOT__.'/Application/'.MODULE_NAME.'/View/' . '/Public/static'
),
);基本这样就完成了弹幕功能。