在另一个Div中飞行DIV(不在整页上)

我希望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>

您需要围绕它们包裹一个Div，例如.container，为其设置CSS值，然后更改：

// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;

// Get viewport dimensions (remove the dimension of the div)
var h = $('.container').height() - 50;
var w = $('.container').width() - 50;

，然后去了：

$(document).ready(function(){
  $('.balloon').each(animateDiv);
});
function makeNewPosition(){
    
    // Get viewport dimensions (remove the dimension of the div)
    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 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;
}

.container {
position:relative;
width:400px;
height:200px;
border: solid 1px;
margin: 50px auto 1000px auto;
}
.balloon {
width: 50px;
height:50px;
background-color:red;
position:absolute;
}

<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='container'>
  <div class='balloon'></div>
  <div class='balloon'></div>
  <div class='balloon'></div>
</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>

我删除了几件事。只需按照以下代码即可。将CND jQuery请求更改为https

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

$(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;
}

<!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'>
</head>
<body>
  <div class='balloon'></div>
  <div class='balloon'></div>
  <div class='balloon'></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

相关内容

最新更新

热门标签：