js文字浮动

最新推荐文章于 2022-08-12 17:53:09 发布

前端、瑞

最新推荐文章于 2022-08-12 17:53:09 发布

阅读量763

点赞数

文章标签： html javascript css

本文链接：https://blog.csdn.net/Xuruij/article/details/108868059

版权

简介：js文字浮动

点击页面，随机出现文字并实现浮动

在这里插入图片描述

1.代码如下

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            font-size: 50px;
        }
        div{
            position: absolute;
            animation: move 2s linear forwards;
        }
        @keyframes move{
            form{
                opacity: 1;
                transform: translateY(0);
            }
            to{
                opacity: 0;
                transform: translateY(-200px);
            }
        }
    </style>
</head>
<body>
    <script>
        function FloatFont(x,y)
        {
            this.data=["自由","平等","公正","法制","爱国","敬业","诚信","友善"]
            this.dom=null;
            this.x=x;
            this.y=y;
            this.color=`rgb(${parseInt(Math.random()*256)},
                            ${parseInt(Math.random()*256)},
                            ${parseInt(Math.random()*256)})`
            this.render();
            
        }
        FloatFont.prototype.render=function()
        {
            var div=document.createElement("div");
            var index=parseInt(Math.random()*this.data.length)

            div.innerHTML=this.data[index];
            div.style.color=this.color;
            div.style.left=this.x+"px"
            div.style.top=this.y+"px"

            document.body.appendChild(div)
            this.dom=div;
        }
        document.onclick=function(e)
        {
            var f=new FloatFont(e.pageX,e.pageY)
        }
    </script>
</body>
</html>

前端、瑞

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js文字浮动

js浮动文字简介：this指向完成1.代码如下简介：this指向完成点击页面，随机出现文字并实现浮动1.代码如下代码如下（示例）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
复制链接

扫一扫