我一直在做一些谷歌搜索来找到这个问题的答案，但我没有运气。这可能是因为我有点业余，我不知道要搜索的正确术语，但也许这里有人可以引导我朝着正确的方向前进或帮助我。
无论如何，我正在寻找一种让 div 随机、平滑地在页面上移动的方法。会有一个背景颜色，然后这个我想看似随机的图像，在页面上无限移动。很像 DVD 播放器主屏幕的背景，其中“DVD”只是漂浮在周围。
div 的起点无关紧要，终点也不重要。它只需要在用户在该页面上的持续时间内在页面上随机移动。
我有不错的 HTML 和 CSS 技能，非常基本的 JS 技能，以及一些实现 jQuery 的经验。理想情况下，我想要一些我可以自己实现的东西。
提前致谢！！！
【问题讨论】：
基本前提是生成位置值，并使用jquery的animate()函数来移动div。下一个位置的计算很简单，你只需要一点数学。这是我刚刚敲出的一个非常基本的jsfiddle。它可能与延迟计时器有关，根据它移动的距离等动态计算速度。但我希望它能给你一个起点。
使用速度修饰符更新示例代码：
由于某种原因，这仍然引起了一些关注，所以这里有一个更新的答案，它使用了应该更平滑的 CSS 过渡。
function RandomObjectMover(obj, container) {
this.$object = obj;
this.$container = container;
this.container_is_window = container === window;
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._getContainerDimensions = function() {
if (this.$container === window) {
return { 'height' : this.$container.innerHeight, 'width' : this.$container.innerWidth };
} else {
return { 'height' : this.$container.clientHeight, 'width' : this.$container.clientWidth };
}
}
RandomObjectMover.prototype._generateNewPosition = function() {
// Get container dimensions minus div size
var containerSize = this._getContainerDimensions();
var availableHeight = containerSize.height - this.$object.clientHeight;
var availableWidth = containerSize.width - 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+'s 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>【讨论】：
试试这个：
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);
【讨论】：
你需要捕获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);
});
【讨论】：
编辑添加了随机移动，例如 DVD 空闲屏幕，但可以在任何地方反弹。
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;
}
【讨论】：
您可以使用jQuery Slide 和Math.random()，生成一个随机数作为移动距离，另一个随机数作为您决定移动方向的依据。
【讨论】：
您需要指定动画的边界 - 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();
});
}
【讨论】：
<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>
【讨论】：