JavaScript实现鼠标点击页面弹出文字效果

青田。

于 2022-06-18 17:44:55 发布

阅读量2k

点赞数 5

分类专栏： JavaScript css 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Tianxiaoxixi/article/details/125349802

版权

JavaScript 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

一、效果

二、代码

<!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>