で区切られたテキストのリストがあります<br/>
。クリックイベントごとにランダムシャッフルを使用してそれぞれをアニメーション化したいです。各クリック後のポストトップ位置はランダムに決定されます。
<html>
<body>
<span id="text1">Text1</span>
<span id="text2">Text2</span>
<span id="text3">Text3</span>
</body>
</html>
で区切られたテキストのリストがあります<br/>
。クリックイベントごとにランダムシャッフルを使用してそれぞれをアニメーション化したいです。各クリック後のポストトップ位置はランダムに決定されます。
<html>
<body>
<span id="text1">Text1</span>
<span id="text2">Text2</span>
<span id="text3">Text3</span>
</body>
</html>
これを試して
$('body').on('click',function(e){
$('span').eq((e.pageX+e.pageY)%3).appendTo($('#container_div'));
})
ここで、container_div は、これらのスパンを含む div の ID です。この場合、「body」のみを使用できます。
実際にはランダムではありませんが、ユーザーのマウスクリックがランダムであることを考慮すると、ランダムな結果が得られます...
ご覧のとおり、マウス クリックの x 位置と y 位置の合計を取り、モジュラスを 3 で取り、そのスパン (モジュラスは 0、1、または 2 のいずれか) を選択して、リストの一番上に移動します。