Question

我制作了一个从屏幕左侧移动到右侧的气球的简单动画，但我希望将其作为抛物线运动而不是线性动画。另外我想从左侧站点隐藏它而不是从左侧开始：0;

这是我的实际代码

＆＃13;

$(document).ready(function() {

  function loop() {
    $('#promo').css({
      left: 0
    });
    $('#promo').animate({
      left: '+=100%',
    }, 10000, 'linear', function() {
      loop();
    });
  }

  loop();
});

＆＃13;

#promo {
  position: absolute;
  z-index: 500;
  left: 0px;
  top: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="promo">
  <img border="0" alt="promo balloon" src="http://www.placehold.it/50" />
</div>

＆＃13;

Answer 1

将气球的id1 id2 date 1: 1 NA 2015-08-02 2: 2 b 2015-08-02 3: 1 a 2015-08-03 4: 2 b 2015-08-03 5: NA a 2015-08-04 6: 2 NA 2015-08-04属性调整为left，以便在动画开始时看不到它。

此外，要停止显示滚动条，请为气球-50px提供容器。然后，您可以使用jQuery / JavaScript调整容器的宽度，以适应浏览器在文档准备就绪时的视口，并调整窗口大小。

<强> CSS

overflow: hidden

<强>的jQuery

.balloon-container {
    position: relative;
    height: 200px; // Set a height of your container here, or use jQuery/JavaScript
}

.balloon {
    position: absolute;
    left: -50px;
}

飞行气球与抛物面动画

1 个答案: