使用字幕：

Question

我有一个小动画飞机，其标志上写着“欢迎来到网站”，我希望它从左侧屏幕向右移动。刚出来，然后消失。现在，我知道这可以用JS完成，但我不知道。在JS中移动一个图像是非常困难的吗？

Answer 1

在.animate()的帮助下，您几乎可以制作任何动画

.animate( properties [, duration ] [, easing ] [, complete ] )



<强>属性
  输入：PlainObject
  动画将移向的CSS属性和值的对象。



持续时间（默认：400）
  输入：Number或String
  确定动画运行时间的字符串或数字。



缓和（默认：swing）
  输入：String
  一个字符串，指示要用于转换的缓动函数。



<强>完整
  输入：Function（）
  动画完成后调用的函数，每个匹配元素调用一次。

对于循环，我们将实际动画部分包装到一个命名函数中，并将其作为complete回调传递。有了它，动画一旦完成就会重新开始。

$(function() {
    var img = $("#plane"),
        width = img.get(0).width,
        screenWidth = $(window).width(),
        duration = 5000;

    function animatePlane() {
        img.css("left", -width).animate({
            "left": screenWidth
        }, duration, animatePlane);
    }

    animatePlane();
});

body { overflow: hidden }
#plane { position: absolute; left: -1000px; width: 50% /* <- not relevant for the animation */ }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="plane" src="https://cdn.pixabay.com/photo/2018/09/13/10/18/aircraft-3674305_640.png" />
<!-- source: https://pixabay.com/de/flugzeuge-propeller-aircraft-alt-3674305/ -->

Answer 2

你可以动画任何东西。我的代码将在屏幕上为div（带有图像或任何您喜欢的内容）设置动画：

HTML：

<div id="animate">Sample</div>

CSS：

#animate {
    position: relative;
    border; 1px solid green;
    background: yellow;
    width: 100px;
    height: 100px;
}

JavaScript / jQuery代码：

$(document).ready(function(e) {
    var width = "+=" + $(document).width();
    $("#animate").animate({
    left: width
  }, 5000, function() {
    // Animation complete.
  });
});

使用JSFiddle here。

你可以在div中放置任何你想要的东西。 CSS中唯一重要的部分是“位置：相对;”属性。您可以将“#animate”从id更改为类，并使多个对象在屏幕上进行动画处理。 jQuery非常通用。

如果您希望动画再次从右向左滚动，请将代码更改为：

$(document).ready(function(e) {
    var width = $(document).width();

    function goRight() {
        $("#animate").animate({
        left: width
      }, 5000, function() {
         setTimeout(goLeft, 50);
      });
    }
    function goLeft() {
        $("#animate").animate({
        left: 0
      }, 5000, function() {
         setTimeout(goRight, 50);
      });
    }

    setTimeout(goRight, 50);
});

为here

工作jsFiddle

要使图像正确滚动并永久消失，请执行以下操作：

$(document).ready(function(e) {
    var width = "+=" + $(document).width();
    $("#animate").animate({
    left: width
  }, 5000, function() {
    $("#animate").css("display", "none");
  });
});

为here

工作jsFiddle

Answer 3

使用字幕：

Spring 4.2.3

如何使用js或jquery使小图像从屏幕的一侧移动到另一侧？

3 个答案:

使用字幕：