JavaScript实现鼠标点击页面弹出文字效果
JavaScript实现鼠标点击页面弹出文字效果
·
一、效果
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tian</title>
<style>
body{
background-color: rgb(35,35,35);
}
span{
/* 让弹出来的文字不被选中，影响操作体验 */
user-select: none;
cursor: default;
font-size: 20px;
color: blanchedalmond;
position: absolute;
transition: 1s;
}
</style>
</head>
<body>
<script>
// 设置随机出现的文字数组
var arr = ["何来人间一惊鸿，只是世间一俗人","这世界欠了你太多的温柔",
"少言自寡，胜过千言万语","人间忽晚，山河已秋",
"除了你自己，没人会时刻在意你","温柔也是好多委屈换来的",
"山茶花的红终究抵不过大海深处的群青",
"崩溃都是悄无声息","过树穿花踏遍山河，终要与你相逢"]
document.onclick = function(x){
// 创建元素节点对象
var span = document.createElement("span")
// 获取当前鼠标的坐标
span.style.left = x.clientX + "px"
span.style.top = x.clientY + "px"
// 让span的值为arr数组内随机的一个值
span.innerHTML = arr[Math.floor(Math.random()*arr.length)]
// 设置span的动画效果
setTimeout(function(){
span.style.opacity = "1"
span.style.transform = "translateY(-100px)"
},100)
setTimeout(function(){
span.style.opacity = "0"
span.style.transform = "translate(-100px,-100px)"
},1500)
// 清掉opacort为0的span
var chi = document.getElementsByClassName("span")
for(var i = 0;i<chi.length;i++){
if(chi[i].style.opacity === "0"){
document.body.removeChild(chi[i])
}
}
// 将span添加到body里
document.body.appendChild(span)
}
</script>
</body>
</html>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
5
0- 0
已为社区贡献19条内容
所有评论(0)