给 WordPress、Typecho、Emlog 等博客网站添加鼠标点击文字特效

发布于 2018-11-02 00:00 132 字 1 min read

从零开始玩转 OpenWrt 2026:进阶网络架构与 Nikki 极速配置指南2026 自建节点实战:Xray VLESS-Vision-REALITY 部署指南AI 角色扮演进阶指南:从 SillyTavern 部署到 Telegram 接入从 WordPress 到 Astro 迁移记录ImmortalWrt固件overlay扩容安装指南基于mihomo内核的OpenWrt插件Nikki推荐yaml配置OpenWrt 插件 Passwall 推荐设置指南Cloudflare简易使用指南WordPress 网站向 Jekyll 静态博客迁移全记录OpenWrt 插件 OpenClash 推荐配置指南OpenWrt插件Passwall开启ipv6推荐配置OpenWrt插件Passwall推荐配置指南OpenWrt桥接后访问光猫方法PVE下快速更新OpenWrt固件方法群晖 Docker 容器版 Emby 添加弹弹 play 弹幕实战群晖 NAS 常用 Docker Compose 项目部署汇总群晖 Docker 开启 IPv6 双栈与 OpenWrt 协同配置指南软路由刷 PVE 并安装 OpenWrt 折腾记录群晖开启 macvlan 网络并通过 compose 命令安装 docker 指定 ip家庭网络布局:玩转 PT 与 Docker macvlan 避坑指南在本地运行 docker 连接 api 更稳定使用 chatGPT 服务网站添加石蒜模拟器OpenWrt建议设置(个人备份)家庭网络布局:群晖 VMM 虚拟机安装 OpenWrt 旁路由实战群晖种草教程——从玩机到佛系(自用备份版)一加3T手机刷机及安卓必备系统优化软件推荐利用 phpMyAdmin 指令将 WordPress 网站快速 HTTPS 化利用 Docker 快速安装 Aria2 + AriaNg 教程给 WordPress、Typecho、Emlog 等博客网站添加鼠标点击文字特效Windows 10 快捷方式小箭头去除与恢复指南自动化备份指南:利用 Dropbox Uploader 实现网站数据与 SQL 数据库同步Linux学习笔记(二)Linux学习笔记(一)建站之旅其一:一些想法建站之旅其三:多次尝试与一次挫败建站之旅其二:从 VPS 科学上网到自建站的萌芽建站之旅其四:常用命令与参考资料汇总
本文介绍如何通过一段简单的 jQuery 脚本,为 WordPress、Typecho 等常见博客系统实现鼠标点击时文字随机浮现并向上消失的交互特效。

转载,原文链接:https://www.moerats.com/archives/373/

将代码放在主题的footer.php中的</body>之前即可。

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

特效字体可以自行设置。

喜欢的话,留下你的评论吧~