固定容器中的随机运动 [英] Random Movement in a Fixed Container
问题描述
我正在寻找可以在固定div容器内随机移动的东西.我喜欢在此示例中对象的移动方式,该示例是在搜索此网站时发现的.
jsfiddle上的代码包含以下内容:
$(document).ready(function(){
animateDiv();
});
function makeNewPosition(){
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.a').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv();
});
};
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.1;
var speed = Math.ceil(greatest/speedModifier);
return speed;
}
CSS:
div.a {
width: 50px;
height:50px;
background-color:red;
position:fixed;
}
但是,我不认为上面的代码完全会限制该对象.我需要我的对象在一个可以说是暂时的容器内随机移动……宽度为1200px,高度为500px.
有人可以指引我正确的方向吗?我是编码的新手,所以我很难独自寻找答案.
这是具有所需功能的jsfiddle: http://jsfiddle.net/2TUFF/
JavaScript:
$(document).ready(function() {
animateDiv();
});
function makeNewPosition($container) {
// Get viewport dimensions (remove the dimension of the div)
$container = ($container || $(window))
var h = $container.height() - 50;
var w = $container.width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
function animateDiv() {
var $target = $('.a');
var newq = makeNewPosition($target.parent());
var oldq = $target.offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.a').animate({
top: newq[0],
left: newq[1]
}, speed, function() {
animateDiv();
});
};
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.1;
var speed = Math.ceil(greatest / speedModifier);
return speed;
}
HTML:
<div id="container">
<div class='a'></div>
</div>
CSS:
div#container {height:100px;width:100px;}
div.a {
width: 50px;
height:50px;
background-color:red;
position:fixed;
}
这将允许您创建具有任何高度/宽度的包装元素,并使浮动元素保持在其容器的区域内.
I'm looking to create something that can move randomly inside of a fixed div container. I love the way the object moves in this example that I found searching this website...
The code on the jsfiddle contains the following:
$(document).ready(function(){
animateDiv();
});
function makeNewPosition(){
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.a').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv();
});
};
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.1;
var speed = Math.ceil(greatest/speedModifier);
return speed;
}
CSS:
div.a {
width: 50px;
height:50px;
background-color:red;
position:fixed;
}
However, I don't believe the code above constricts that object at all. I need my object to move randomly inside of a container that is let's say for now... 1200px in width and 500px in height.
Can someone steer me in the right direction? I'm super new to coding so I'm having a hard time finding an answer on my own.
Here is a jsfiddle with the functionality you're seeking: http://jsfiddle.net/2TUFF/
JavaScript:
$(document).ready(function() {
animateDiv();
});
function makeNewPosition($container) {
// Get viewport dimensions (remove the dimension of the div)
$container = ($container || $(window))
var h = $container.height() - 50;
var w = $container.width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
function animateDiv() {
var $target = $('.a');
var newq = makeNewPosition($target.parent());
var oldq = $target.offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.a').animate({
top: newq[0],
left: newq[1]
}, speed, function() {
animateDiv();
});
};
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.1;
var speed = Math.ceil(greatest / speedModifier);
return speed;
}
HTML:
<div id="container">
<div class='a'></div>
</div>
CSS:
div#container {height:100px;width:100px;}
div.a {
width: 50px;
height:50px;
background-color:red;
position:fixed;
}
This will allow you to create a wrapping element with any height/width and have the floating element keep within its container's area.
这篇关于固定容器中的随机运动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!