Как получить div для случайного перемещения по странице (используя jQuery или CSS)

Ответ 1

Основная предпосылка - генерировать позиционные значения и использовать функцию jquery animate() для перемещения div. Расчет следующей позиции прост, вам просто нужно немного математики. Вот очень простой jsfiddle, который я только что выбил. Это могло бы быть возможно с таймером задержки, динамически вычисляющим скорость, основанную на том, как далеко он продвинулся слишком далеко e.c.t. Надеюсь, это даст вам отправную точку.

http://jsfiddle.net/Xw29r/

Обновлен пример кода с модификатором скорости:

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

По какой-то причине этому все еще уделяется некоторое внимание, поэтому здесь обновленный ответ, в котором используются CSS-переходы, которые должны быть намного более плавными.

http://jsfiddle.net/wry4d9Lt/1/

function RandomObjectMover(obj, container) {
	this.$object = obj;
  this.$container = container;
  this.pixels_per_second = 250;
  this.current_position = { x: 0, y: 0 };
  this.is_running = false;
}

// Set the speed of movement in Pixels per Second.
RandomObjectMover.prototype.setSpeed = function(pxPerSec) {
	this.pixels_per_second = pxPerSec;
}

RandomObjectMover.prototype._generateNewPosition = function() {
	// Get container dimensions minus div size
	var availableHeight = this.$container.innerHeight - this.$object.clientHeight;
  var availableWidth = this.$container.innerWidth - this.$object.clientHeight;
    
  // Pick a random place in the space
  var y = Math.floor(Math.random() * availableHeight);
  var x = Math.floor(Math.random() * availableWidth);
    
  return { x: x, y: y };    
}

RandomObjectMover.prototype._calcDelta = function(a, b) {
	var dx   = a.x - b.x;         
  var dy   = a.y - b.y;         
  var dist = Math.sqrt( dx*dx + dy*dy ); 
  return dist;
}

RandomObjectMover.prototype._moveOnce = function() {
		// Pick a new spot on the page
    var next = this._generateNewPosition();
    
    // How far do we have to move?
    var delta = this._calcDelta(this.current_position, next);
    
		// Speed of this transition, rounded to 2DP
		var speed = Math.round((delta / this.pixels_per_second) * 100) / 100;
    
    //console.log(this.current_position, next, delta, speed);
          
    this.$object.style.transition='transform '+speed+ linear';
    this.$object.style.transform='translate3d('+next.x+'px, '+next.y+'px, 0)';
    
    // Save this new position ready for the next call.
    this.current_position = next;
  
};

RandomObjectMover.prototype.start = function() {

	if (this.is_running) {
  	return;
  }

	// Make sure our object has the right css set
  this.$object.willChange = 'transform';
  this.$object.pointerEvents = 'auto';
	
  this.boundEvent = this._moveOnce.bind(this)
  
  // Bind callback to keep things moving
  this.$object.addEventListener('transitionend', this.boundEvent);
  
  // Start it moving
  this._moveOnce();
  
  this.is_running = true;
}

RandomObjectMover.prototype.stop = function() {

	if (!this.is_running) {
  	return;
  }
  
  this.$object.removeEventListener('transitionend', this.boundEvent);
  
	this.is_running = false;
}


// Init it
var x = new RandomObjectMover(document.getElementById('a'), window);


// Toolbar stuff
document.getElementById('start').addEventListener('click', function(){
	x.start();
});
document.getElementById('stop').addEventListener('click', function(){
	x.stop();
});
document.getElementById('speed').addEventListener('keyup', function(){
  if (parseInt(this.value) > 3000 ) {
 		alert('Don\'t be stupid, stupid');
    this.value = 250;
  }
	x.setSpeed(parseInt(this.value));
});


// Start it off

x.start();

div#toolbar {
  position:fixed;
  background:#20262F;
  width:100%;
  text-align:center;
  padding: 10px
}
div#a {
width: 50px;
height:50px;
background-color:red;
position:absolute;
}

<div id="toolbar">
<button id="start">Start</button>
<button id="stop">Stop</button>
<input type="number" value="250" id="speed" />
</div>
<div id='a'></div>

Ответ 2

Попробуйте следующее:

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);

Пример скрипта

Ответ 3

вам нужно будет зафиксировать размеры window

тогда вам нужно generate random numbers <= height и width screen (минус width/height box)

введите поле a absolute и введите поле сгенерированные x, y coordinates

затем установите таймер для повторного вызова 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);
});

Ответ 4

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;   
}​

Ответ 5

Вы можете использовать jQuery Slide и Math.random(), генерируя одно случайное число для использования в качестве расстояния до перемещения и другое случайное число, чтобы основывать ваше решение в каком направлении двигаться.

Ответ 6

Вы хотите указать границы анимации - каковы максимальные значения для атрибутов 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();
   });
}

Ответ 7

<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>