3

我有一个小型动画飞机，上面写着“欢迎来到该网站”，我希望它从左侧屏幕循环移动到右侧。出来，然后消失。现在，我知道这可以用 JS 完成，但我不知道。在 JS 中移动一张图像很难吗？

4

3 回答 3

7

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

.animate（属性[，持续时间] [，缓动] [，完成]）

  • properties
    类型： PlainObject
    动画将向其移动的 CSS 属性和值的对象。

  • 持续时间 （默认值 400：）
    类型： 数字 或 字符串
    确定动画将运行多长时间的字符串或数字。

  • easing （默认值 swing：）
    类型： String
    一个字符串，指示用于过渡的缓动函数。

  • complete
    类型： 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/ -->

于 2012-10-03T16:33:08.073 回答
3

你可以为任何东西制作动画。我的代码将在屏幕上为 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 。

你可以在 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);
});

在这里工作 jsFiddle

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

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

在这里工作 jsFiddle

于 2012-10-03T16:37:30.140 回答
-1

使用选框：

<marquee 
`scrollamount="10"`
 direction="left"
 behavior="scroll">
 Welcome to the site 
 <img src="images/plane.jpg" />
 </marquee>
于 2019-11-11T18:34:17.287 回答