如何让 div 在页面中随机移动（使用 jQuery 或 CSS）
Posted
技术标签:
【中文标题】如何让 div 在页面中随机移动（使用 jQuery 或 CSS）【英文标题】：how to get a div to randomly move around a page (using jQuery or CSS) 【发布时间】：2012-05-10 06:52:33 【问题描述】：我一直在做一些谷歌搜索来找到这个问题的答案，但我没有运气。这可能是因为我有点业余，我不知道要搜索的正确术语，但也许这里有人可以引导我朝着正确的方向前进或帮助我。
无论如何，我正在寻找一种让 div 随机、平滑地在页面上移动的方法。会有一个背景颜色，然后这个我想看似随机的图像，在页面上无限移动。很像 DVD 播放器主屏幕的背景，其中“DVD”只是漂浮在周围。
div 的起点无关紧要，终点也不重要。它只需要在用户在该页面上的持续时间内在页面上随机移动。
我有不错的 html 和 CSS 技能，非常基本的 JS 技能，以及一些实现 jQuery 的经验。理想情况下，我想要一些我可以自己实现的东西。
提前致谢！！！
【问题讨论】：
【参考方案1】：基本前提是生成位置值，并使用jquery的animate()函数来移动div。下一个位置的计算很简单，你只需要一点数学。这是我刚刚敲出的一个非常基本的jsfiddle。它可能与延迟计时器有关，根据它移动的距离等动态计算速度。但我希望它能给你一个起点。
http://jsfiddle.net/Xw29r/
使用速度修饰符更新示例代码：
http://jsfiddle.net/Xw29r/15/
由于某种原因，这仍然引起了一些关注，所以这里有一个更新的答案，它使用了应该更平滑的 CSS 过渡。
http://jsfiddle.net/bf9nv1q6/
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>【讨论】：
那个速度调节器效果很好！ （如果你住在本地，我会给你一个 cookie。）你知道，当我阅读代码时，我明白代码中发生了什么，但我自己肯定无法创建它。你们太棒了！ 所以代码在 jsfiddle 中工作，但是一旦我将它插入 Dreamweaver，就会出现问题。我在内部拥有所有的 CSS 和 JQ，只共享一个文件，但有些奇怪。我从字面上复制并粘贴了所有内容，但它仍然无法正常工作。这是我的代码的副本（抱歉，不能在这个网站上缩进）：tinytext.org/YmXT# 知道为什么它可能不起作用吗？我插入了那个警报，但它甚至没有为我进入那个块。 这很奇怪，但是这样做。 calcSpeed 函数上的端括号（波浪括号 ）。删除它并通过在键盘上输入来重新添加它。保存它然后重新测试你的脚本。看起来它以一种奇怪的方式复制了该函数的结尾括号。所以你只需要重新输入那个字符 成功了！ A) 你是怎么认为这是问题所在？ B）知道为什么/如何发生吗？ @Ivan 除了窗口容器，我从未测试过任何东西。这是因为只有窗口支持innerHeight。我更新了代码 sn-p 以修复容器尺寸以使用非窗口。此处示例：jsfiddle.net/d67Lztmc【参考方案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);
Example fiddle
【讨论】：
这正是我想要的，除了我需要是一个流畅的动画，而不是跳跃。我得看看其他人发布的内容，但谢谢！！ @Ephraim 没问题 - 我刚刚更新了代码和小提琴，以便它顺利淡入淡出。 很好，但是如何制作多个？如果我有 30 张图片，并且一次只能显示 5 张图片【参考方案3】：你需要捕获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);
);
【讨论】：
【参考方案4】：编辑添加了随机移动，例如 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;
【讨论】：
将随机性的实现留给提问者 因此只回答了部分问题。如果 OP 询问如何移动元素，那么这将是一个可以接受的答案。 这对我来说看起来很随机，这意味着它对用户来说看起来很随机。虽然仍然不是我正在寻找的确切效果，但我会使用这段代码，看看我可以调整什么。谢谢！！【参考方案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>
【讨论】：
以上是关于如何让 div 在页面中随机移动（使用 jQuery 或 CSS）的主要内容，如果未能解决你的问题，请参考以下文章
页面上有一个div 100*100 颜色为黄色 按键盘上下左右键可以操作div移动 ctrl+键盘上下键可以放大缩小 ctrl+键盘左右键可以随机变颜色