javascript - 自动滚动大水平图像

Question

我有一个简单的 HTML 页面，其中包含一个 div 和一个 img 标签，

<div class="wrapper">
    <img class="long-image" src="http://www.blueskyimages.info/images/header3.jpg?template=art_and_photography-003&colorScheme=blue&header=&button=buttons1" alt="this is long horizontal image"/>
</div>

图像尺寸为 4000x1000 像素，我希望此图像在加载图像时自动滚动。

我不确定如何只用一张大图来做到这一点

fiddle here

Answer 1

您可以使用 jQuery 为 DIV 的背景设置动画。

(function slide(){
    $('.wrapper').animate({backgroundPosition : '-=2px'}, 60, 'linear', slide);
})();

工作 JSFiddle