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



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

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

修改 function.php 文件

主题模板文件 function.phpfunction 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; ?>
PS:typecho 程序可以直接用,其他程序酌情修改!

效果演示

动动你的小手,点击鼠标左键,查看效果。



 赏 
感谢您的支持,我会继续努力哒!
支付宝收款码
tips
(*) 6 + 8 =
共 5 条评论, 6 次评论点赞。快来参与吧!
    2023年12月13日 安徽省六安市 发自Windows 10 回复 2

    出差之前 还想着 弹字效果谁能写下一篇教程让我直接拿走用呢,刚回来 打开电脑 就看到了 你这篇。

      2023年12月13日 湖北省 发自Windows 10 回复 0

      拿走,不谢!

        2023年12月13日 安徽省六安市 发自Windows 10 回复 1

        哈哈,拿走也用不了,用的新主题还在整理中 跟之前用的typecho写的有点不一样。

    2023年12月09日 江苏省无锡市 发自Mac OSX 回复 3

    又一个没卵用的小特效,哈哈哈哈

      2023年12月09日 湖北省 发自Windows 10 回复 0

      是没卵用……