记录分享一段网页弹字效果代码
分享网页弹字效果代码,可自定义内容与开关,适用于Typecho程序,需修改`function.php`和`footer.php`文件。
本文最后由 荒野孤灯 更新于 2023 年 12 月 14 日 22 时 20 分,已有 342 天未更新。今日被查阅 4 次,若内容或图片资源失效,请留言反馈,谢谢!
摘要由 AI 智能生成
今天闲来无事,把我之前主题的网页弹字功能代码抠出来,记录下,方便以后调用。
这段代码可以主题设置中自定义弹字内容,并带有开关。可以把自己喜欢的一些座右铭啥的,时刻提醒自己。一个没卵用的小代码……
修改 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; ?>
PS:typecho 程序可以直接用,其他程序酌情修改!
效果演示
动动你的小手,点击鼠标左键,查看效果。
文章标题:记录分享一段网页弹字效果代码
分类标签:折腾,typecho,工具代码,前端技术
文章链接:https://80srz.com/posts/1553.html
许可协议: 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
分类标签:折腾,typecho,工具代码,前端技术
文章链接:https://80srz.com/posts/1553.html
许可协议: 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
出差之前 还想着 弹字效果谁能写下一篇教程让我直接拿走用呢,刚回来 打开电脑 就看到了 你这篇。
拿走,不谢!
哈哈,拿走也用不了,用的新主题还在整理中 跟之前用的typecho写的有点不一样。
又一个没卵用的小特效,哈哈哈哈
是没卵用……