javascript - 如何移动背景图像图案？

Question

我四处寻找这个问题，但找不到答案，而且我也不知道该怎么做。我正在寻找的是一个 JavaScript 或 jQuery 脚本，它将在 div 容器中向右“移动”背景图像，以便该模式具有“动画”效果。

怎么可能做到这一点？如果我没有足够详细地解释这个问题，我深表歉意。

Answer 1

您可以使用 CSS background-position属性设置背景的位置。

这是一个 live example每四分之一秒将背景向右移动一个像素，当它达到 100 像素时重置。

HTML:

<div id="theDiv">This is the div</div>

CSS:

#theDiv {
    background-image: url(http://www.gravatar.com/avatar/7b13c109d50df67d5f7d0b1d901d7fb7?s=32&d=identicon&r=PG);
    background-repeat: no-repeat;
}

JavaScript:

jQuery(function($) {

  var pos = 0;
  move();

  function move() {
    ++pos;
    if (pos > 100) {
      pos = 0;
    }
    $("#theDiv").css("background-position", pos + "px");
    setTimeout(move, 250);
  }

});