javascript - 自动滚动大水平图像

标签 javascript jquery html css

我有一个简单的 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

最佳答案

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

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

工作 JSFiddle

关于javascript - 自动滚动大水平图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30867461/

相关文章:

javascript - 移动设备上 'resize' 的替代方案是什么?

javascript - 从 API 检索数组并在 React 中过滤

javascript - Jquery Mobile Slider 更改事件

javascript - <Select> 带有无限滚动下拉菜单的小部件

javascript - 弹出窗口关闭后触发的事件

javascript - 构建HTML5 Canvas/JS游戏

Javascript 代码在 LINUX Weblogic 中不工作,在 UNIX 框中工作正常

javascript - 如何禁用 pagepilling.js 行为?

javascript - 如何让一个<div>上的 'setTimeout'自动转到另一个<div>?

javascript - document.ready 函数中的多个函数