我想将 div 移动到另一个 div 中。现在它们飞过整个页面。
我应该在代码中更改什么才能使其正常工作？
$(document).ready(function() {
$('.balloon').each(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 el = $(this);
var newq = makeNewPosition();
var oldq = $(el).offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$(el).animate({
top: newq[0],
left: newq[1]
}, speed, function() {
animateDiv.apply(this);
});
};
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 = .4;
var speed = Math.ceil(greatest / speedModifier);
return speed;
}.balloon {
width: 50px;
height: 50px;
background-color: red;
position: fixed;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Create a New Pen</title>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class='balloon'></div>
<div class='balloon'></div>
<div class='balloon'></div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>最佳答案
创建一个div 并在css 中添加高度和宽度。然后使用您为 .height() 和 .width() 部分提供的 div 类代替窗口。
您不必将气球放在 html 的 div 中，但我这样做只是因为。
$(document).ready(function(){
$('.balloon').each(animateDiv);
});
function makeNewPosition(){
// Get viewport dimensions (remove the dimension of the div)
var h = $('.sky').height() - 50;
var w = $('.sky').width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv(){
var el = $(this);
var newq = makeNewPosition();
var oldq = $(el).offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$(el).animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv.apply(this);
});
};
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 = .4;
var speed = Math.ceil(greatest/speedModifier);
return speed;
}.balloon {
width: 50px;
height:50px;
background-color:red;
position:fixed;
}
.sky{
width:100%;
height:150px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Create a New Pen</title>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="sky">
</div><div class='balloon'></div>
<div class='balloon'></div>
<div class='balloon'></div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>关于javascript - 飞行 div 在另一个 div 中(不是在整个页面上)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46331086/