自动滚动大水平图像

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像素我希望此图像在加载图像时自动滚动。

我不确定如何只使用一张大图像

小提琴here

Answer 1

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

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

正在使用 JSFiddle