Question

我正在尝试制作旋转img宽度窗口滚动。但我有一个问题。问题是只有一个图像会旋转。我已从codepen.io

创建了 DEMO

如果单击演示，则可以看到向下滚动时只有一个图像旋转其他图像不旋转。我想在向下滚动时制作它然后所有图像都会旋转。我怎么能这样做，任何人都可以帮助我？

<div class="container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/gear2.svg" alt id="leftgear">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/gear2.svg" alt id="leftgear">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/gear2.svg" alt id="leftgear">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/gear2.svg" alt id="leftgear">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/gear2.svg" alt id="leftgear">
  </div>

的Javascript

$(window).scroll(function() {
var theta = $(window).scrollTop() / 10 % Math.PI;
$('#leftgear').css({ transform: 'rotate(' + theta + 'rad)' });
});

Answer 1

ID必须是唯一的。将ID更改为类并执行

$(window).scroll(function() {
  var theta = $(window).scrollTop() / 10 % Math.PI;
  $('.leftgear').css({ transform: 'rotate(' + theta + 'rad)' });
});

或者如果您需要各自改变

  $('.leftgear').each(function(i) {
    $(this).css({ transform: 'rotate(' + (theta+(i*10)) + 'rad)' });
  });

滚动旋转图像只使用javascript工作一个图像

1 个答案: