wordpress主页弹幕效果

因为换了新主题argon，发现上方有一块banner，空挺大的，只显示个博客名有点浪费了，于是突发奇想在这一块做个弹幕效果

因为我也没学过php和js，所以只能一点点摸索着来，首先是基础的弹幕效果的实现

在html里有个标签叫marquee，可以实现文字的移动效果，我们输入

1
2
3

<marquee behavior="scroll" direction="left" scrollamount="20">
        <font color="#F0F0F0" size="15px" id='mybullet0'>只有风暴才能击倒大树</font>
    </marquee>

就可以得到一个从右往左移动的弹幕了，是不是很简单

好的现在的问题是，我们怎么把他显示在那块banner上

这个主题的banner部分，所有的代码都储存在header.php里，我们可以在宝塔面板上修改，也可以用wordpress自带的主题编辑器修改，在这里我使用后者

在wordpress的仪表盘界面，依次点击外观->主题编辑器，然后在右上角选择argon主题，再从右边选择header文件，就可以进行编辑

我们先来找到banner的代码在哪，使用网页的检查功能，查看banner这一块的class或者id，然后在编辑界面按ctrl+f进行搜索，查找banner_container，就可以找到文字所在区域

我是首先将下面那段代码（也就是显示博客名）添加了隐藏的属性

1	<span class="banner-title-inner"><?php echo $banner_title; ?></span>

然后在banner-title text-white这个div下，添加了上面写的那段弹幕代码

然后点击最下面的更新文件，重新进入博客主页查看，这时已经能实现一条弹幕的效果了，但是你会发现不够完美，一是弹幕只有一条，还无法改变；二是因为这个div高度和宽度都比较小，弹幕都走不到屏幕边缘就无了，所以我又重新写了一个div

<div class="mybullet">
<marquee behavior="scroll" direction="left" scrollamount="20">
        <font color="#F0F0F0" size="15px" id='mybullet0'>只有风暴才能击倒大树</font>
    </marquee>
</div>

并且样式写上以下代码：

.mybullet {
    position: absolute;
    z-index: 0;
    top: 5vh;
    width: 100%;
    height: 39vh;
opacity: 0;
}

这样弹幕区域就能占满整个banner了，至于这个 opacity （透明度）属性，后面解释为什么我会加上

使用php制作随机多条弹幕

在这么大的一块区域，只显示一条弹幕显然不太合适，于是我用php写了一个弹幕列表，然后进行随机排序，最后抽出前六个进行显示，代码如下

<?php
$bullet = array('RUA', '真实猛男不虚一切', 'FNNDP', '只有风暴才能击倒大树', '唯一指定邮箱', '这合理吗', '很神秘', '停一下pong友', '我好怒啊', '摸了', '忙于阅堇', '幸福往往是摸得透彻，而敬业的心却常常隐藏', '嗦不出话', '蛮怪的', 'mong男打击', '跟得上我的思必得吗', '那还蛮真实的', '鸡盒王鱼奎恩', '数据删除', '喂,zaima', '不在，CNM', '哪来的狗，gun');
shuffle($bullet);
?>
<div class="mybullet">
    <marquee behavior="scroll" direction="left" scrollamount="20">
        <font color="#F0F0F0" size="<?php echo mt_rand(5, 7); ?>vh" id='mybullet0'><?php echo $bullet[5] ?></font>
    </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="30">
        <font color="#F0F0F0" size="<?php echo mt_rand(5, 7); ?>vh" id='mybullet1'><?php echo $bullet[0] ?></font>
    </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="20">
        <font color="#F0F0F0" size="<?php echo mt_rand(5, 7); ?>vh" id='mybullet2'><?php echo $bullet[1] ?></font>
    </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="25">
        <font color="#F0F0F0" size="<?php echo mt_rand(5, 7); ?>vh" id='mybullet3'><?php echo $bullet[2] ?></font>
    </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="20">
        <font color="#F0F0F0" size="<?php echo mt_rand(5, 7); ?>vh" id='mybullet4'><?php echo $bullet[3] ?></font>
    </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="28">
        <font color="#F0F0F0" size="<?php echo mt_rand(5, 7); ?>vh" id='mybullet5'><?php echo $bullet[4] ?></font>
    </marquee>
</div>

同时为了美观，我为弹幕的字体大小设置了一个随机值，并且每个弹幕的速度也都不同（也可以设置随机值，这里我就懒得弄了），这样弹幕显示就不会很单调

此时我们已经得到了一个比较完美的弹幕了，唯一的缺陷就是每次打开网页，弹幕就不变了，并且我也不想让这个弹幕能一直显示，最好有个开关控制

弹幕开关

我们可以使用一个按钮来控制弹幕的开关和刷新，在小工具的自定义html里，输入以下代码：

1	<button id='quin_caidan' class='quin_caidan' onclick="xianshi()" style="opacity: 1">秦王彩蛋</button>

具体的美化，可以去百度查找“好看的按钮样式”，在这里我就不列出代码了

这时我们就需要给代码添加点击事件，来实现我们的功能，js代码可以写在上面的自定义html里面，也可以写在header.php里面，但我推荐后者（原因后面讲）

<script>
    function xianshi() {
        if (document.getElementsByClassName("mybullet")[0].style.opacity == 1) {
            document.getElementsByClassName("mybullet")[0].style.opacity = 0;
        } else {
            document.getElementsByClassName("mybullet")[0].style.opacity = 1;

        }

    }
</script>

这时，这个按钮已经可以控制弹幕的显示与否了，我们就只剩下了如何控制弹幕的刷新这个问题

弹幕刷新

最开始我的想法是，使用php自带的数组乱序方法shuffle，在每次点击后对数组进行下乱序，然后再用js对文字重新赋值，代码如下

<script>
    <?php shuffle($bullet); ?>
    function xianshi() {
        if (document.getElementsByClassName("mybullet")[0].style.opacity == 1) {
            document.getElementsByClassName("mybullet")[0].style.opacity = 0;
        } else {
            document.getElementsByClassName("mybullet")[0].style.opacity = 1;
            document.getElementById("mybullet0").innerText = "<?php echo $bullet[0]; ?>";
        }

    }
</script>

这样比较符合直觉，因为我没学过php，所以一开始就想到了这样，结果经过测试发现，由于php代码无论如何都只会在网页加载时执行一遍，之后无论如何点击按钮，随机排序那段代码都永远不会再执行，于是我的项目陷入了停滞

之后经过思考，既然php代码只能执行一遍，那我就让这一遍用来把数组传给js，用js去乱序、赋值，不就可以了吗，于是我去查询如何将php数组传给js，还真找到了结果，代码也很简洁

1	var mybulletjs = eval(<?php echo json_encode($bullet); ?>);

并且js里打乱数组顺序的代码，也很轻松能查到

1
2
3

mybulletjs.sort(function() {
                return (0.5 - Math.random());
            });

现在万事俱备，只欠东风了，贴出完整代码

<script>
    var mybulletjs = eval(<?php echo json_encode($bullet); ?>);
    function xianshi() {
        if (document.getElementsByClassName("mybullet")[0].style.opacity == 1) {
            document.getElementsByClassName("mybullet")[0].style.opacity = 0;
        } else {
            document.getElementsByClassName("mybullet")[0].style.opacity = 1;
            mybulletjs.sort(function() {
                return (0.5 - Math.random());
            });
            document.getElementById("mybullet0").innerText = mybulletjs[0];
            document.getElementById("mybullet1").innerText = mybulletjs[1];
            document.getElementById("mybullet2").innerText = mybulletjs[2];
            document.getElementById("mybullet3").innerText = mybulletjs[3];
            document.getElementById("mybullet4").innerText = mybulletjs[4];
            document.getElementById("mybullet5").innerText = mybulletjs[5];

        }

    }
</script>