【2024最新博客美化教程重置版】一分钟教会你在博客页面中加入javascript点击出弹出文字效果!

news2024/11/24 2:37:47

🚀 个人主页 极客小俊
✍🏻 作者简介:程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

我们可以在博客园的后台设置中,把以下代码加入到里面!

代码如下

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- 点击出弹出文字效果 -->
<script type="text/javascript">
    $(document).click(function(e){
        var list = [
            "❤HTML❤", "❤CSS❤", "❤Javascript❤", "❤PHP❤", "❤MySQL❤", "❤Vue.js❤", "❤算法❤", "❤数据结构❤",
            "❤程序员❤", "❤敬业❤", "❤诚信❤", "❤友善❤"
        ];
        textUp( e, 2000, list, 200 )
    })
    function textUp( e, time, arr, heightUp ){
        var lists = Math.floor(Math.random() * arr.length);
        var colors = '#'+Math.floor(Math.random()*0xffffff).toString(16);
        var $i = $('<span />').text( arr[lists] );
        var xx = e.pageX || e.clientX + document.body.scroolLeft;
        var yy = e.pageY || e.clientY + document.body.scrollTop;

        $('body').append($i);
        $i.css({
            top: yy,
            left: xx,
            color: colors,
            transform: 'translate(-50%, -50%)',
            display: 'block',
            position: 'absolute',
            zIndex: 999999999999
        })
        $i.animate({
            top: yy - ( heightUp ? heightUp : 200 ),
            opacity: 0
        }, time, function(){
            $i.remove();
        })
    }
</script>

然后打开我们博客园设置中的博客侧边栏公共代码区域中

如图

效果如下

"👍点赞" "✍️评论" "收藏❤️"

大家的支持就是我坚持下去的动力!

如果以上内容有任何错误或者不准确的地方,🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法,
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1588525.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

利用正射影像对斜射图像进行反向投影

在图像投影和映射领域,有两种类型的投影:正向投影和反向投影。正向投影涉及使用内部方向(即校准相机参数)将 3D 点(例如地面上的物体)投影到 2D 图像平面上。另一方面,向后投影是指根据 2D 图像确定地面物体的 3D 坐标的过程。 为了匹配倾斜图像和正射影像并确定相机位置…

[C++][算法基础]有向图拓扑排序(拓扑)

给定一个 n 个点 m 条边的有向图&#xff0c;点的编号是 1 到 n&#xff0c;图中可能存在重边和自环。 请输出任意一个该有向图的拓扑序列&#xff0c;如果拓扑序列不存在&#xff0c;则输出 −1。 若一个由图中所有点构成的序列 A 满足&#xff1a;对于图中的每条边 (x,y)&a…

FreeAskInternet:本地AI搜索引擎,一周收获6.4K Star

简介 FreeAskInternet是一个完全免费&#xff0c;私人和本地运行的搜索聚合器和答案生成使用LLM&#xff0c;无需GPU。用户可以提出一个问题&#xff0c;系统通过搜索进行多引擎搜索&#xff0c;并将搜索结果合并到ChatGPT3.5 LLM中&#xff0c;根据搜索结果生成答案。所有进程…

一、OpenCvSharp环境搭建

一、Visual Studio 创建新项目 二、选择Windows窗体应用&#xff08;.NET Framework&#xff09; 直接搜索模板&#xff1a;Windows窗体应用(.NET Framework) 记得是C#哈&#xff0c;别整成VB(Visual Basic)了 PS&#xff1a;若搜索搜不到&#xff0c;直接点击安装多个工具和…

C++感受4-HelloWorld中文版——认识编码

及时了解“编码”对编写代码的影响&#xff0c;是中国程序员越早知道越好的知识点。 一分钟了解什么叫“编码”和“解码”&#xff1b;通过实际演示&#xff0c;充分理解中文Windows下&#xff0c;C源代码编码需要注意的地方&#xff1b;通过 -finput-charsetutf8 等 g 编译配置…

四、Consul服务注册与发现

一、Consul服务注册与发现 1、为什么引入 微服务所在的IP地址和端口号硬编码到订单微服务中&#xff0c;会存在非常多的问题 &#xff08;1&#xff09;如果订单微服务和支付微服务的IP地址或者端口号发生了变化&#xff0c;则支付微服务将变得不可用&#xff0c;需要同步修改…

【科技】2024最新微信机器人一键部署教程

外话 话说上次写文章好像又过了几个月了…… 其实还是因为马上小升初的各种密考&#xff0c;其它地方不知道&#xff0c;反正广东这块名校基本上都得密考考进去 笔者连考几次都惨不忍睹…… 不过5月份会有一个信息技术特长生招生&#xff0c;看看能不能吧~ 正文 先说&#xff…

新质生产力与智能制造:推动制造业转型升级的双引擎

引言 随着科技的不断进步和全球制造业的快速发展&#xff0c;新质生产力与智能制造成为推动制造业转型升级的关键驱动力。新质生产力强调的是以科技创新和制度创新为核心&#xff0c;通过提高生产效率和经济效益来推动经济发展。而智能制造则是利用现代信息技术&#xff0c;实现…

Python | Leetcode Python题解之第24题两两交换链表中的节点

题目&#xff1a; 题解&#xff1a; class Solution:def swapPairs(self, head: ListNode) -> ListNode:dummyHead ListNode(0)dummyHead.next headtemp dummyHeadwhile temp.next and temp.next.next:node1 temp.nextnode2 temp.next.nexttemp.next node2node1.next…

【稳定检索|投稿优惠】2024年生物学与智能计算国际会议 (ICBIC 2024)

2024年生物学与智能计算国际会议 (ICBIC 2024) 2024 International Conference on Biology and Intelligent Computing 【会议简介】 2024年生物学与智能计算国际会议即将在上海召开。本次会议旨在汇聚生物学与智能计算领域的专家学者&#xff0c;共同探讨两者交叉融合的前沿…

一文带你搞懂软件开发/怎么开发?哪些常见陷阱?如何避坑?

引言 在当今数字化时代&#xff0c;软件开发已成为推动科技进步和商业发展的重要引擎。然而&#xff0c;软件开发并非一帆风顺&#xff0c;其中蕴藏着许多陷阱和挑战。如何避免这些陷阱&#xff0c;提高软件开发的效率和质量&#xff0c;成为开发者们面临的重要问题 本文将深入…

关于Ansible的模块 ⑦

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 在继《关于Ansible的模块 ①》、《关于Ansible的模块 ②》、《关于Ansible的模块 ③》与《关于Ansible的模块 ④》、《关于ansib…

NVMe 基础

NVMe&#xff08;Non-Volatile Memory Express&#xff09;是一种高速、低延迟的I/O接口协议&#xff0c;专为闪存存储设备设计&#xff0c;包括固态硬盘&#xff08;SSD&#xff09;和其他非易失性存储设备。NVMe协议是为取代早期的AHCI&#xff08;Advanced Host Controller …

bufbomb 报错 ./stdio-common/vfprintf-internal.c: No such file or directory.

注意&#xff1a;此方法针对HUST特供 bufbomb 的 level2&#xff0c;其它情况不保证有效。 有同学可能发现&#xff0c;当跳入bang函数时&#xff0c;无论是gdb还是直接执行&#xff0c;都会出现以下报错 其实若是再仔细排查一下&#xff0c;会发现实际上只有跳到 <bang0&…

呼出气一氧化碳:评估呼吸健康与戒烟状态的关键指标

一氧化碳&#xff08;CO&#xff09;是一种无色、无味、有毒的气体&#xff0c;通常由不完全燃烧产生。在生物学领域&#xff0c;CO作为一种重要的信使分子&#xff0c;在多种生物过程中发挥着作用。特别值得一提的是&#xff0c;它作为血红素加氧酶&#xff08;HO&#xff09;…

基于二级片内硬件堆栈的后向CFI 验证方法研究,第4章 硬件设计与实现(二)

4.3 批处理验证实现 批处理验证是为了进一步降低硬件资源消耗和降低系统功耗提出的二级片内硬件堆栈的另一种实现方法&#xff0c;批处理验证的硬件结构图如图4.7所示&#xff0c;也由指令检测单元、返回地址缓冲区、MAC计算单元、MAC存储单元组成。 图4.7 批处理验证硬件框图…

基于SpringBoot+Vue的咖啡商城(带文档)

项目介绍: 基于SpringBootVue的咖啡商城&#xff08;带文档&#xff09; 网上咖啡商城系统&#xff0c;咖啡商城系统 前后端分离&#xff0c;Java开发&#xff0c;Vue框架&#xff0c;Redis分布式缓存&#xff0c;MyBatis 运行环境&#xff1a;JDK1.8MySQLMavenRedisNode.js 项…

【Python-MP4文体提取】

Python-MP4文体提取 ■ pip 和 setuptools工具■ OpenCV和Tesseract■ Tesseract OCR V5.0安装教程&#xff08;Windows&#xff09;■ 1. 运行程序出现如下问题&#xff1a;我们需要安装Tesseract OCR■ 2. 下载Tesseract-OCR■ 3. 安装Tesseract-OCR■ 4. 添加到环境变量的系…

Linux磁盘扩容并设置挂载点

背景 使用pve创建了一个虚拟机&#xff0c;各种环境配置都安装好了之后发现分配的磁盘空间太小了&#xff0c;默认的就30多个G&#xff0c;这还没咋玩呢就满了&#xff0c;像扩容却找遍了这个pve都没找到扩容按钮&#xff0c;并且我这个磁盘不是lvm结构的&#xff0c;所以好像…

01攻防世界web-Training-WWW-Robots

写在前面&#xff1a; 一入网安深似海&#xff0c;学习需要毅力和强大的坚持。 1.Training-WWW-Robots 题目 解题过程 访问网址后面加上/robots.txt 进入fl0g.php文件&#xff0c;找到flag 相关知识点1.Robots&#xff1a; 理解一下robotS文件中的user-agent: 以及Disallow…