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);
  }

});

Answer 2

您无法在背景位置使用jQuery.animate，因为：

应将所有动画属性设置为单个数值。

并且background-position不是单个数值属性。

因此，您最好的选择是在这种情况下不直接使用背景图像。您可以重新进行布局，以使图像实际上位于另一个固定大小的<div>容器（<div>）中的绝对位置position: relative; overflow: hidden;（背景图像的大小）。然后让它“移动” - 在绝对定位的left上为CSS <div>属性设置动画。

如何移动背景图像模式？

2 个答案: