Question

您好我一直在创建一个图像动画，允许图像从左向右然后向下移动。

当图像向下移动时，它必须被溢出隐藏，因为它将超出背景图像。

图像将连续循环，从左到右依次循环。网上有一个类似的例子how to move/slide an image from left to right。

然而，这只是从左到右滑动然后停止。动画中也只有一个图像。

Answer 1

我会考虑使用CSS动画。它有什么动态吗？在关键帧的末尾，你可以简单地使用overflow：hidden。

Answer 2

为什么不使用css？这是fiddle

div {
    width: 100px;
    height: 100px;
    background: red;
    position :relative;
    animation: mymove 5s infinite;
}


/* Standard syntax */
@keyframes mymove{
    0%   {top: 0px; left: 0px;}
    25%  {top: 0px; left: 100px;}
    50%  {top: 0px; left: 0px;}
    75%  {top: 50px; left: 0px;}
    100% {top: 100px; left: 0px;}
}

Answer 3

尝试使用jQuery函数animate（），如下例所示：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_right

简单地说，找到你想要通过jQuery移动的元素，用正确的参数调用他的动画为0，然后在调用之后再次使用底部0进行动画处理，然后将元素再次放在开头没有动画和整个循环无限。

我不确定这会起作用，只是一个草稿：

$(document).ready(function(){
  var element = $("something");
  while (true) {
    element.animate({right:"0"});
    element.animate({bottom:"0"});
    element.css("right", "auto").css("bottom", "auto").css("left", "0").css("top", "0");
  }
});

如何使用javascript从左到右然后向下移动div

3 个答案: