html+css+js实现文字鼠标（点击生成文字）

最新推荐文章于 2024-05-16 01:30:01 发布

小小锋叔叔

最新推荐文章于 2024-05-16 01:30:01 发布

阅读量1.1k

点赞数 4

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

本文链接：https://blog.csdn.net/qq_64608499/article/details/124981552

版权

Web 同时被 2 个专栏收录

13 篇文章 4 订阅

订阅专栏

前端

7 篇文章 4 订阅

订阅专栏

效果图

：

源码如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 
<body>
    <script>
        (function () {
            var a_idx = 0;
            window.onclick = function (event) {
                var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤",
                    "❤敬业❤", "❤诚信❤", "❤友善❤");
 
                var heart = document.createElement("b"); //创建b元素
                heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
 
                document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
                a_idx = (a_idx + 1) % a.length;
                heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式
 
                var f = 16, // 字体大小
                    x = event.clientX - f / 2, // 横坐标
                    y = event.clientY - f, // 纵坐标
                    c = randomColor(), // 随机颜色
                    a = 1, // 透明度
                    s = 1.2; // 放大缩小
 
                var timer = setInterval(function () { //添加定时器
                    if (a <= 0) {
                        document.body.removeChild(heart);
                        clearInterval(timer);
                    } else {
                        heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                            c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                            s + ");";
 
                        y--;
                        a -= 0.016;
                        s += 0.002;
                    }
                }, 15)
 
            }
            // 随机颜色
            function randomColor() {
 
                return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
                .random() * 255)) + ")";
 
            }
        }());
    </script>
</body>
 
</html>

小小锋叔叔

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
html+css+js实现文字鼠标（点击生成文字）

效果图：源码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title></head> <body> <script> (function () { var a_idx = 0; ..
复制链接

扫一扫

专栏目录