Question

我尝试与fullpage.js同步旋转固定图像，并且它在大多数情况下都有效。

为了防止不必要的旋转，我必须堆叠css rotate()值。

当我向下滚动并按照我想要的方式堆叠时（即180,360,540，..）

向上滚动时它不起作用。

我尝试使用警报来识别计算是否已完成，堆叠似乎没有问题，但向上滚动部分代码根本不会打印到HTML文档。

这是我的代码;

var rotation = 0,
    rotationInc = 180,
    miniLogo = $('#mini-logo');

$(document).ready(function () {
  $('#home').fullpage({
    verticalCentered: false,
    scrollingSpeed: 300,
    onLeave: function (index, nextIndex, direction) {
      if (direction == 'down') {
        rotation += rotationInc;

        setTimeout(function () {
          miniLogo.addClass('enlarge');
        }, 400);

        miniLogo.each(function () {
          alert(rotation);
        });

        setTimeout(function () {
          miniLogo.css({
            'transform': 'rotate(' + rotation + 'deg)'
          });
        }, 800);

        setTimeout(function () {
          miniLogo.removeClass('enlarge');
        }, 1200);
      }

      if (direction == 'up') {
        rotation -= rotationInc;

        setTimeout(function () {
          miniLogo.addClass('enlarge');
        }, 400);

        miniLogo.each(function () {
          alert(rotation);
        });

        setTimeout(function () {
          miniLogo.css({
            'transform': 'rotate(' + rotation + 'deg);'
          });
        }, 800);

        setTimeout(function () {
          miniLogo.removeClass('enlarge');
        }, 1200);
      }
    }
  });
});

第一个if语句完美无缺。第二个提供了我想要的警报，但没有在html上打印减少的度数。

任何帮助都会非常感激，我确定我已经犯了一个菜鸟错误。

Answer 1

试试这个：

rotation = 0;
rotationInc = 180;
miniLogo = $('#mini-logo');

$(document).ready(function () {
  $('#home').fullpage({
    verticalCentered: false,
    scrollingSpeed: 300,
    onLeave: function (index, nextIndex, direction) {

    var rotation = (direction == 'down') 
        ? rotation += rotationInc
        : rotation -= rotationInc;

        setTimeout(function () {
          miniLogo.addClass('enlarge');
        }, 400);

        miniLogo.each(function () {
          alert(rotation);
        });

        setTimeout(function () {
          miniLogo.css({
            'transform': 'rotate(' + rotation + 'deg)'
          });
        }, 800);

        setTimeout(function () {
          miniLogo.removeClass('enlarge');
        }, 1200);
      }
    }
  });
});

两个if语句。两者都有效。只有一个打印

1 个答案: