【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的方式走一遍&…

Nginx配置跨域请求

nginx安装在IP为x.x.x.x的服务器上 nginx安装 第一步&#xff0c;安装编译工具及库文件。 命令&#xff1a;yum -y install make zlib zlib-devel gcc-c libtool openssl openssl-devel pcre pcre-devel 第二步&#xff0c;安装Nginx。 # 下载Nginx安装包 命令&#xff…

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

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

不同于Oracle:SEQUENCE的区别

不同于Oracle&#xff1a;SEQUENCE的区别 前言 在使用Oracle数据库SEQUENCE功能时&#xff0c;发现Oracle对边界处理比较奇怪。刚好GreatSQL也支持SEQUENCE&#xff0c;就拿来一起比较一下。 先说结论&#xff1a;GreatSQL 的使用基本和Oracle基本一致&#xff0c;但是对 ST…

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

最近越来越多的网工运维小伙伴都在吐槽&#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…

AcWing-5:多重背包问题 II

5. 多重背包问题 II - AcWing题库 #include <bits/stdc.h> using namespace std; const int MAXN11050; //个数是1000*log2(2000)&#xff1b;1000以log以2为底2000的数 const int MAXV2005; int temp_v[MAXN]; //存储实际每个的体积 int temp_w[MAXN]; …

Python 大麦抢票脚本

请注意&#xff0c;编写或使用抢票脚本可能违反相关网站的服务条款和法律法规。以下内容仅供学习和了解技术原理之用&#xff0c;不鼓励或支持任何违反规定的行为。 在Python中编写大麦网抢票脚本通常涉及以下几个步骤&#xff1a; ### 1. 分析网站结构 - 使用浏览器的开发者…

数字化转型(三)-员工数据分析处理能力

这个是我在数字化转型脑海里最先闪现的&#xff0c;原因是之前认识一兄弟&#xff0c;自学python然后在公司里像开挂了一样。公司排每个人的活都是按周来分配&#xff0c;但是这兄弟能写python&#xff0c;写了个外挂两小时就干完了一周的工作&#xff0c;后来不知道咋被公司发…

一些优雅的算法(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的对比…