Question

我一直在尝试获取标题以移动200 x 200像素的正方形，但是我的代码无法正常工作。我打算使用topOffset和setInterval方法移动标题，但我不了解topOffset的工作原理。到目前为止，我的代码仅将标头向右移动200个像素：

var leftOffset = 0;

        var moveRight = function () {
            $("#heading").offset({left:leftOffset});

            leftOffset++;

            if (leftOffset > 200) {
                leftOffset = 200;
            }
        };

        setInterval(moveRight, 4);

        var offsetTop = 0;
        var moveDown = function () {
            $("#heading").offset({down:offsetTop});

            offsetTop--;

            if(offsetTop < 200) {
                offsetTop = 200;
            }
        };

        setInterval(moveDown,4);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h1 id = "heading">Hello World!</h1>

Answer 1

对于这样的动画，使用CSS（而不是JS）效果更好。对于初学者来说，由于CSS是硬件加速的，它的性能要好得多。即使有人在其浏览器中禁用了JS，它的实现和工作也更加简单。

根据您的情况，您可以使用关键帧动画在每个阶段设置元素的位置。请尝试以下示例。请注意，我仅使用150px而不是200px，以便在代码段中更容易看到效果。您可以轻松地将top和left的值更改为所需的任何值。

@keyframes square {
  0% { top: 0; left: 0; }
  25% { top: 0; left: 150px; }
  50% { top: 150px; left: 150px; }
  75% { top: 150px; left: 0; }
  100% { top: 0; left: 0; }
}

h1 {
  position: absolute;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  animation-name: square;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h1 id="heading">Hello World!</h1>

Answer 2

您可以将功能更改为：

var moveDown = function () {
    $("#heading").offset({top:offsetTop});

    offsetTop++;

    if(offsetTop > 200) {
        offsetTop = 200;
    }
};

那应该给你想要的效果。

Answer 3

我在jQuery文档中没有看到“向下”作为偏移的可能坐标，而是尝试“顶部”，这应该是唯一需要的更新。

var leftOffset = 0;

var moveRight = function() {
  $("#heading").offset({
    left: leftOffset
  });

  leftOffset++;

  if (leftOffset > 200) {
    leftOffset = 200;
  }
};

setInterval(moveRight, 4);

var offsetTop = 0;
var moveDown = function() {
  $("#heading").offset({
    top: offsetTop
  });

  offsetTop--;

  if (offsetTop < 200) {
    offsetTop = 200;
  }
};

setInterval(moveDown, 4);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h1 id="heading">Hello World!</h1>

如何向下移动页眉？

3 个答案: