html 个 div 的起始位置和随机移动

Question

我想得到类似 this 的东西，但是我的 html div 包含句子而不是 css 方块。我试图让句子从随机位置开始并在页面上随机移动。我尝试调用 html div 而不是在 javascript 中创建新的 div；我不知道这是否是正确的方法..这可能吗？不习惯javascript，开始用

我的html代码：

<html>
    <head>
        <title>Niveau 1</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="script.js"></script>
        <link href="style.css" rel="stylesheet" />
    </head>
    <body>
        <div class='d1'>
            <p><a href="niveaux/niveau2/niveau2.html">quoi maintenant ?</a></p>
        </div>
        <div class='d2'>
            <p><a href="niveaux/niveau2/niveau2.html">quand maintenant ?</a></p>
        </div>
        <div class='d3'>
            <p><a href="niveaux/niveau2/niveau2.html">qui maintenant ?</a></p>
        </div>
        <div class='d4'>
            <p><a href="niveaux/niveau2/niveau2.html">où maintenant ?</a></p>
        </div>
        <div class='d5'>
            <p><a href="niveaux/niveau2/niveau2.html">aller de l'avant, appeler ça aller, appeler ça de l'avant</a></p>
        </div>
        <div class='d6'>
            <p><a href="niveaux/niveau2/niveau2.html">longuement, brièvement, c'est égal</a></p>
        </div>
        <div class='d7'>
            <p><a href="niveaux/niveau3/niveau3.html">quelle liberté</a></p>
        </div>
        <div class='d8'>
            <p><a href="niveaux/niveau4/niveau4.html">quelque fois je me dis toi, si c'est moi qui parle</a></p>
        </div>
    </body>
</html>

我的javascript代码：


$(document).ready(function(){
    animateDiv('.d1');
    animateDiv('.d2');
    animateDiv('.d3');
    animateDiv('.d4');
    animateDiv('.d5');
    animateDiv('.d6');
    animateDiv('.d7');
    animateDiv('.d8');
});

function makeNewPosition(){

    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh,nw];

}

function animateDiv(myclass){
    var newq = makeNewPosition();
    $(myclass).animate({ top: newq[1], left: newq[0] }, 15000,   function(){
      animateDiv(myclass);
    });

};

}

我的css代码：

    height: 100%;
    width: 100%;
    margin: none;
    padding: none;
    background-color: black;
}

* {
   cursor: none;
}

div.d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8 {
    position:fixed;
    font-size: 20px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    cursor: none;
    color: transparent;
    text-shadow: 0px 0px 5px #ffffff;
}

a {
    text-decoration: none;
    color: transparent;
}

a:visited {
    text-decoration: none; color: transparent;
}

a:hover {
    color: none;
    text-decoration:none;
    cursor:crosshair;
    text-shadow: 0px 0px 3px #ffffff
}

Answer 1

要将文本放在开头的随机位置，您可以使用 $.css() 而不是 $.animate() 来立即移动元素：

function moveDiv(myclass) {
    var newq = makeNewPosition();
    $(myclass).css({ top: newq[1], left: newq[0] });
}

并更新 document.ready 函数以对所有元素调用 moveDiv()

$(document).ready(function () {
    moveDiv('.d1');
    moveDiv('.d2');
    moveDiv('.d3');
    moveDiv('.d4');
    moveDiv('.d5');
    moveDiv('.d6');
    moveDiv('.d7');
    moveDiv('.d8');
    animateDiv('.d1');
    animateDiv('.d2');
    animateDiv('.d3');
    animateDiv('.d4');
    animateDiv('.d5');
    animateDiv('.d6');
    animateDiv('.d7');
    animateDiv('.d8');
});

P.S.

我必须应用一些修复程序才能使您的代码正常工作：

我不得不删除 JavaScript

}

function animateDiv(myclass){
    var newq = makeNewPosition();
    $(myclass).animate({ top: newq[1], left: newq[0] }, 15000,   function(){
      animateDiv(myclass);
    });

};

// } <- remove

而且您的 CSS 开头似乎被截断了，所以我在顶部添加了 html {：

html {
    height: 100%;
    width: 100%;
    margin: none;
    padding: none;
    background-color: black;
}

html 个 div 的起始位置和随机移动

Start position and random movement for html divs

javascript

random

position