web-dev-qa-db-ja.com

ページをランダムに移動するdivを取得する方法（jQueryまたはCSSを使用）

私はこれに対する答えを見つけるためにいくつかのグーグルを行ってきましたが、私は運がありませんでした。私は少しアマチュアで、検索するのに適切な用語がわからないからかもしれませんが、誰かが私を正しい方向に導くか、助けてくれるかもしれません。

とにかく、私はdivをランダムに、ページ内をスムーズに移動させる方法を探しています。背景色があるので、この画像を一見ランダムに、ページ内を無限に移動したいと思います。 「DVD」がただ浮かんでいるDVDプレーヤーのホーム画面の背景によく似ています。

Divの開始点は重要ではなく、終了点も重要ではありません。ユーザーがそのページにいる間、ページ内をランダムに移動するだけです。

適切なHTMLおよびCSSスキル、非常に基本的なJSスキル、jQueryの実装経験があります。理想的には、自分で実装できるものが欲しいです。

前もって感謝します！！！

jquerycssanimation
21
Ephraim

基本的な前提は、位置の値を生成し、jqueryのanimate（）関数を使用してdivを移動することです。次の位置の計算は簡単で、ちょっとした計算が必要です。ここに私がちょうどノックアップした非常に基本的なjsfiddleがあります。遅延タイマーを使用することもできます。これは、どのくらい動きすぎたかなどに基づいて動的に計算される速度です。しかし、それは私が希望する出発点を提供します。

http://jsfiddle.net/Xw29r/

速度修飾子を使用したサンプルコードの更新：

http://jsfiddle.net/Xw29r/15/

39
Lee

これを試して：

function moveDiv() {
    var $span = $("#random");

    $span.fadeOut(1000, function() {
        var maxLeft = $(window).width() - $span.width();
        var maxTop = $(window).height() - $span.height();
        var leftPos = Math.floor(Math.random() * (maxLeft + 1))
        var topPos = Math.floor(Math.random() * (maxTop + 1))

        $span.css({ left: leftPos, top: topPos }).fadeIn(1000);
    });
};

moveDiv();
setInterval(moveDiv, 5000);

fiddle の例

6
Rory McCrossan

windowの次元をキャプチャする必要があります

generate random numbers<=heightのwidthおよびscreen（widthのheight/boxを除く）が必要です。

ボックスにabsolute位置を与え、ボックスに生成されたx、ycoordinatesを与えます

次に、this functionを再度呼び出すようにタイマーを設定します。

:)

$(document).ready(function() {
    randoBox = {
      width:$("body").width(),
      height:$("body").height(),
      x:0,
      y:0,
      el:null,
      time:1000,
      state:"active",
      init: function(){
        el = $(document.createElement('div'));
        el.attr("style","position:absolute;left:"+this.x+";top:"+this.y+";");
        el.html("DVD")            
        el.height(100);
        el.width(100);
        $("body").append(el);
      },
      move:function(){
        this.y = Math.random()*this.height+1;
        this.x = Math.random()*this.width+1;
        el.attr("style","position:absolute;left:"+this.x+";top:"+this.y+";");            
      },
      run:function(state){
        if (this.state == "active" || state){
          this.move();
          setTimeout(function(){this.run()},this.time);
        }
      }
    }
    randoBox.init();
    randoBox.run(true);
});
5
RGB

[〜＃〜] edit [〜＃〜]DVDアイドル画面のようにランダムな動きを追加しましたが、どこでもバウンスできます。

http://jsfiddle.net/ryXBM/2/

dirR = "+=2";
dirL = "+=2";

function moveDir() {
 if (Math.random() > 0.95) {
  swapDirL();
 }
 if (Math.random() < 0.05) {
  swapDirR();
 }
}

function swapDirL() {
    dirL == "+=2" ? dirL = "-=2" : dirL = "+=2"; 
}

function swapDirR() {
    dirR == "+=2" ? dirR = "-=2" : dirR = "+=2";   
}

setInterval (function() { $("#d").css("left", dirL); $("#d").css("top", dirR); moveDir(); } , 50)​

[〜＃〜] css [〜＃〜]

#d { position: absolute;
 left: 100px;
 top: 100px;
 width: 100px;
 height: 100px;
 background-color: #fce;   
}​
1
Heitor Chang
<html>
    <head>
        <link rel="stylesheet" href="sample1.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                    $('.btn').mouseover(function(){
                        $(this).css({
                            left:(Math.random()*$(window).width()-20),
                            top:(Math.random()*$(window).height()-20),      
                        });
                    });              
            });
        </script>
    </head> 
    <body>
        <div class="btn" style="position: absolute">button</div>
    </body>
</html>
0
Rupa Das

jQuery Slide および Math.random（） を使用して、移動する距離として使用する1つの乱数と、移動する方向に基づいて決定する別の乱数を生成できます。に。

0
Mitch Satchwell

アニメーションの境界線を指定する必要があります-topおよびleft属性の最大値は何ですか...その後、必要なのは.animate()です何度も呼び出される関数...

このような何かが動作するはずです-

var maxLeft = _left_border - $('#selectedElement').width(); // counter intuitively this is actually the right border
var maxTop = _top_border  - $('#selectedElement').height();
var animationDurration = _duration;

function randomAnimation(){
  var randomLeft = Math.floor(Math.random()*maxLeft);
  var randomTop = Math.floor(Math.random()*maxTop);

  $('#selectedElement').animate({
     left: randomLeft,
     top: randomTop
   }, animationDurration, function() {
     randomAnimation();
   });
}
0
Lix