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

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

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

代码如下

<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.mzph.cn/news/810328.shtml

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

相关文章

我是如何让chatgpt给我打零工的

背景 https://www.moobc.cn/ 网页如图所示。是一个个人练手的网站。使用chatgpt来进行网站分析优化&#xff0c;本文阅读大约需要10分钟。 分析 js代码及chat分析 首先&#xff0c;让我们从整体架构开始分析这个名为 "moobc" 的网站的前端 JavaScript 代码。这段…

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

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

洛谷-P1036 [NOIP2002 普及组] 选数

P1036 [NOIP2002 普及组] 选数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<bits/stdc.h> using namespace std; const int N30; int n,r; int g[N]; //存用户输入的数 int arr[N]; //存答案 int res0; //存种类数bool is_prime(int y){ //求素数if(y<2){…

Kubernetes(k8s):Pod 的 Node Selector详解

Kubernetes&#xff08;k8s&#xff09;&#xff1a;Pod 的 Node Selector详解 1、什么是Node Selector&#xff1f;2、Node Selector的工作原理3、Node Selector的用法1、例如&#xff1a;给node01 、node02 分别打上标签2、使用标签调度Pod3、删除节点的标签 &#x1f496;Th…

2024年会计、审计、财务与经济管理国际会议(ICAAFEM2024)

2024年会计、审计、财务与经济管理国际会议&#xff08;ICAAFEM2024&#xff09; 会议简介 2024年国际会计、审计、财务和经济管理会议&#xff08;ICAAFEM2024&#xff09;将在云南省昆明市举行。会议旨在为从事“会计、审计、财务、经济管理”研究的专家学者提供一个平台&am…

2023年上半年信息系统项目管理师——案例分析真题与答案解释

2023年上半年信息系统项目管理师——案例分析真题与答案解释 The Miracle of Love爱的奇迹 A college professor had his sociology class go into slums to get case histories of 200 young boys.一位大学教授让他的社会学课进入贫民窟&#xff0c;获取200名年轻男孩的案例。…

the python tutorial

Using the Python Interpreter Using Python as a Calculator To do floor division and get an integer result you can use the // operator Problem Solving with Algorithms and Data Structures using Python 首先将其拉到本地&#xff1f; 按照craft的方式走一遍&…

2024年认证杯A题论文首发+问题一代码免费分享

首先进行KMO检验以及球形检验&#xff0c;对一级指标下的这些二级指标判断相关性&#xff0c;从而选择降维方法。这里主要采用主成分分析法对多维指标进行降维&#xff0c;对于主成分分析法通常来讲&#xff0c;指标之间联系越大&#xff0c;降维效果越好。因此&#xff0c;我们…

为什么越来越多的网工运维转行网络安全?

最近越来越多的网工运维小伙伴都在吐槽&#xff1a;干网工、运维多年&#xff0c;薪资还是5.6K&#xff0c;技术也遇瓶颈上不去&#xff0c;考虑转岗或者转行。其中大部分的网工运维小伙伴们纷纷瞄准了高薪高前景的网络安全工程师岗位 网络安全是怎样的岗位&#xff1f; 人才…

纯css实现左右拖拽改变盒子大小

效果&#xff1a; 代码 <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html;charsetutf-8"><title></title><style>body {background-color: black;color: white;}.column {ove…

一些优雅的算法(c++)

求最大公约数&#xff1a;辗转相除法 int gcd(int a,int b){return b0?a:gcd(b,a%b); }求最小公倍数&#xff1a;两整数之积除以最大公约数 int lcm(int a, int b){return a*b / gcd(a, b); }十进制转n进制&#xff1a; char get(int x){if(x<9){return x0;}else{return…

2024Mathorcup数学应用挑战赛C题|图神经网络的预测模型+ARIMA时间序列预测模型+人员排班混合整数规划模型|完整代码和论文全解全析

2024Mathorcup数学应用挑战赛C题|图神经网络的预测模型ARIMA时间序列预测模型人员排班混合整数规划模型|完整代码和论文全解全析 我们已经完成了2024Mathorcup数学建模挑战赛C题的40页完整论文和代码&#xff0c;相关内容可见文末&#xff0c;部分图片如下&#xff1a; 问题分…

【MATLAB源码-第37期】matlab基于STBC(空时分组码)的MIMO系统误码率仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 空时分组码&#xff08;Space-Time Block Code&#xff0c;简称STBC&#xff09;是一种在多输入多输出&#xff08;MIMO&#xff09;无线通信系统中用于提高数据传输可靠性的编码技术。MIMO技术利用多个发射和接收天线来同时…

自然语言控制机械臂:ChatGPT与机器人技术的融合创新(上)

引言&#xff1a; 自OpenAI发布ChatGPT以来&#xff0c;世界正迅速朝着更广泛地将AI技术融合到机器人设备中的趋势发展。机械手臂&#xff0c;作为自动化与智能化技术的重要组成部分&#xff0c;在制造业、医疗、服务业等领域的应用日益广泛。随着AI技术的进步&#xff0c;机械…

C语言.指针(5)

指针&#xff08;5&#xff09; 1.sizeof和strlen的对比1.1sizeof1.2strlen1.3sizeof和strlen的对比 2.数组和指针笔试题解析2.1一维数组2.2字符数组2.3二维数组 3.指针运算笔试题解析3.1 题目13.2 题目23.3 题目33.4 题目43.5 题目53.6 题目63.7 题目7 1.sizeof和strlen的对比…

聊一聊分库分表(是什么?怎么分?有什么坑?)

目录 为什么会分表分库&#xff1f; 数据分表 怎么分表&#xff1f; 垂直分表 好处&#xff1a; 缺点&#xff1a; 水平分表 优点&#xff1a; 缺点&#xff1a; 数据分库 怎么分库&#xff1f; 水平分库 适用场景&#xff1a; 优点&#xff1a; 注意事项&#x…

中科方德服务器操作系统安装zabbix5.0

原文链接&#xff1a;中科方德服务器操作系统安装zabbix5.0 Hello&#xff0c;大家好啊&#xff01;接着我们上一次的讨论&#xff0c;今天我要为大家介绍如何在已经安装好的中科方德服务器操作系统基础上&#xff0c;安装和配置Zabbix 5.0。Zabbix是一个开源的监控软件工具&am…

LeetCode-416. 分割等和子集【数组 动态规划】

LeetCode-416. 分割等和子集【数组 动态规划】 题目描述&#xff1a;解题思路一&#xff1a;01背包问题&#xff0c;动规五部曲解题思路二&#xff1a;0解题思路三&#xff1a;0 题目描述&#xff1a; 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分…

python爬虫 - 下载图片

文章目录 1、下载图片示例1&#xff1a;使用 .urlretrieve() 函数2、下载图片示例2 - 使用 open/write 函数3、下载图片示例33.1 使用 open/write 下载3.2 使用 urlretrieve下载 爬虫的本质&#xff1a;模拟对应的App&#xff0c;浏览器访问对应的地址获取到数据 1、下载图片示…

考虑预同步的虚拟同步机T型三电平逆变器并离网MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 模型简介 三相 T 型三电平逆变器电路如图所示&#xff0c;逆变器主回路由三个单相 T 型逆变器组成。 直流侧输入电压为 UPV&#xff0c;直流侧中点电位 O 设为零电位&#xff0c;交流侧输出侧是三相三线制连…