可用于博客园美化 在底部html插入js部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标点击页面特效</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
// 设置一个计数a_index
var a_index = 0;
$(function() {
// 设置鼠标点击方法
$("body").click(function(e) {
// 创建要显示的内容一个数组
var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤");
// 创建一个容器 并插入显示文字
var sp = $("<span></span>").text(a[a_index])
// 创建按顺序显示文本 则要进行对a_index的值改变
// 因为a_index是0开始所以加一进行取余
a_index = (a_index + 1) % a.length;
// 获取鼠标坐标
var x = e.pageX,
y = e.pageY
// 设置样式
sp.css({
"z-index": 464646664,
"left": x,
"top": y - 20,
"position": "absolute",
// 设置颜色随机生成
"color": "rgb(" + (255 * Math.random()) + "," + (255 * Math.random()) + "," + (255 * Math.random()) + ")",
"font-weight": "bold",
})
$("body").append(sp);
// 设置动画
sp.animate({
"top": y - 180,
"opacity": 0,
}, 1500,
function() {
sp.remove()
})
})
})
</script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<h1 align="center">尝试在空白处点击鼠标</h1>
</body>
</html>
效果如下：
