Question

我正在尝试为应该在div容器边界内随机移动的图像设置动画。我在这里找不到设置动画边框的解决方案，但在图像停留在div内的位置上却没有。

例如，我有一个片段-即使向下滚动页面，我也需要红色方块在黄色div内移动。

我该如何实现？

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

div#container {height:100px;width:100px;margin-left: 500px;background-color: yellow;}

div.a {
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>
<div>
<h1>TITLE!</h1>
<p>
Just some test which the red squere won't touch at any point
</p>
</div>
<div id="container">
<div class='a'></div>
</div>

Answer 1

为元素提供position:absolute;时，必须使用position:relative;定义元素，以使子元素（绝对元素）不会超出其边界。

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

div#container {
  height:100px;
  width:100px;
  margin-left: 500px;
  background-color: yellow; 
  position:relative;/*Added position to the parent container*/
}

div.a {
 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>
<div>
<h1>TITLE!</h1>
<p>
Just some test which the red squere won't touch at any point
</p>
</div>
<div id="container">
<div class='a'></div>
</div>

参考链接1：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

实时演示：https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute

Answer 2

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

div#container {
position:relative;
  height:100px;width:100px;margin-left: 500px;background-color: yellow;}

div.a {
 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>
<div>
<h1>TITLE!</h1>
<p>
Just some test which the red squere won't touch at any point
</p>
</div>
<div id="container">
<div class='a'></div>
</div>

Answer 3

我正在使用CSS动画使它看起来更平滑。更改记录在Javascript / jQuery和CSS源代码中。

CSS动画比jQuery动画要快得多，因为它们可以在separate thread上运行。

$(document).ready(function() {
  /* Initiate animation */
  animateDiv();
    
  /* Apply animation class */
  $(".a").addClass("animate");
});

/* Trigger the end of the transition */
$("div.a").on('transitionend', function() {
  /* Run next animation when previous one stopped */
  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();
  /* Calculate duration in ms */
  var speed = calcSpeed([oldq.top, oldq.left], newq) + "ms";
  
  /* Set the duration of the animation */
  $(".a.animate").css("transitionDuration", speed);

  /* Set the new coordinates */
  $(".a").css({"top":newq[0], "left":newq[1]});
  
  /*
  $('.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;
}

div#container {
  height: 100px;
  width: 100px;
  margin-left: 500px;
  background-color: yellow;
  position: relative; /* Added */
}

div.a {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 0; /* Initial position */
  left: 0; /* Initial position */
}

div.a.animate {
  transition: left, top;
  transition-duration: 1000ms; /* Default value */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1>TITLE!</h1>
  <p>
    Just some test which the red squere won't touch at any point
  </p>
</div>
<div id="container">
  <div class='a'></div>
</div>

在div边框内对图像进行动画处理

3 个答案: