Question

我有一个标题图片，我希望使用jQuery从左到右顺利移动。

我搜索了Google和stackoverflow，但没有得到我需要的东西。

HTML5代码：

<header>
  <div class="move">
    <img src="http://s10.postimg.org/noxw294zd/banner.png" alt="banner" />
  </div>
</header>

我使用<marquee>作为简单方法，但我需要它才能顺利移动。

如何创建我正在寻找的效果？

Answer 1

jQuery animate()可以在这里提供帮助。以下代码将在页面加载时将图像移动到500sx的最终左偏移3s内。一定要在CSS中指定初始位置。

$(document).ready(function(){
$('.move').animate({left:'500px'},3000);
});

注意：jQuery不是动画制作时最好的javascript库。请尝试使用GSAP。 greensock.com/gsap

Answer 2

可以使用jQuery完成：

    function moveRight() {
    $("#b").css('left', '0px');
    $("#b").animate({
        left: "+=300"
    }, 5000, moveRight)
}

$(document).ready(function () {

    moveRight();

});

小提琴： http://jsfiddle.net/iyogesh/gLr8vqbv/

Answer 3

尝试使用CSS keyFrames

在您想要继续移动的div上放置一个ID动画区域并添加如下所示的CSS：

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
@-webkit-keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
@-ms-keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
@-moz-keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

#animate-area { 
  height: 100%;
  background-image: url(your url here);
  background-position: 0px 0px;
  background-repeat: repeat-x;

  animation: animatedBackground 140s linear infinite;
  -ms-animation: animatedBackground 140s linear infinite;
  -moz-animation: animatedBackground 140s linear infinite;


  -webkit-animation: animatedBackground 140s linear infinite;
}

这会将图像从右向左移动

工作示例：http://plnkr.co/edit/MLSlItGZhMIY4szOcPeR?p=preview

Answer 4

如果您想使用纯JavaScript，并且不希望拥有大量的库依赖项（如查询），请尝试以下操作。这是JSFIDDLE

var $el = document.querySelector('.move');
var left = 0;
var id = requestAnimationFrame(frame);

function frame() {
    left++;
    $el.style.left = left + 'px';
    if (left == 250) {
        cancelAnimationFrame(id);
    } else {
        requestAnimationFrame(frame);
    }
}

如何在html5中从左到右平滑地移动标题图像

4 个答案: