记录分享一段网页弹字效果代码

分享网页弹字效果代码，可自定义内容与开关，适用于Typecho程序，需修改`function.php`和`footer.php`文件。

本文最后由荒野孤灯更新于 2023 年 12 月 14 日 22 时 20 分，已有 268 天未更新。今日被查阅 3 次，若内容或图片资源失效，请留言反馈，谢谢！

今天闲来无事，把我之前主题的网页弹字功能代码抠出来，记录下，方便以后调用。

这段代码可以主题设置中自定义弹字内容，并带有开关。可以把自己喜欢的一些座右铭啥的，时刻提醒自己。一个没卵用的小代码……

修改 function.php 文件

在主题模板文件 function.php 的 function themeConfig($form) {} 函数中加入以下代码：

    /*自动网页弹字*/
    $webtz = new Typecho_Widget_Helper_Form_Element_Radio('webtz', 
    array(1 => _t('启用'),
    0 => _t('关闭')),
    0, _t('网站弹字'), _t('默认关闭，启用后点击网页任何空白位置自动弹字，也可使用“自定义网站弹字”，对弹字进行自定义'));
    $form->addInput($webtz);
    $webtzCustom = new Typecho_Widget_Helper_Form_Element_Text('webtzCustom', NULL, NULL, _t('自定义网站弹字'), _t('启用网站弹字时生效，在这里填入自定义弹字内容，用“|”隔开。如“富强|民主|文明|和谐|自由”，留空则使用默认文字'));
    $form->addInput($webtzCustom);

修改 footer.php 文件

在主题模板文件 footer.php 中加入以下代码：

<!---自动网页弹字--->
<?php if ($this->options->webtz): ?>
    <script>
      $(function() { 
        var a_idx = 0, b_idx = 0; c_idx = 0; 
        jQuery(document).ready(function($) { 
          $("body").click(function(e) {
          var <?php if ($this->options->webtzCustom): ?>aCustom = "<?php $this->options->webtzCustom(); ?>",a = aCustom.split('|'),<?php else: ?>a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"),<?php endif; ?>
          b = new Array("#09ebfc", "#ff6f6f", "#ffc61b", "#51ff65", "#5197ff", "#a551ff", "#ff51f7", "#ff518e", "#9f0010", "#666666"),
          c = new Array("18");
          var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; b_idx = (b_idx + 1) % b.length; c_idx = (c_idx + 1) % c.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "font-size": c[c_idx] + "px", "color": b[b_idx] }); $("body").append($i); $i.animate({ "top": y - 120, "opacity": 0 }, 1200, function() { $i.remove(); }); }); }); var _hmt = _hmt || []; 
      })
    </script>
<?php endif; ?>