Javascript 轮动态能力

Question

我遇到了这个轮子脚本，我想可能实现它。但是，我需要车轮面板的 $ 是动态的。 SASS 中已经有一个变量，但是如果我将其修改为 20，并添加更多 div 元素，轮子仍然只显示 10。看起来计算 Angular mixin 使用 $num-sides 变量。当它第一次加载时，我确实看到了额外的元素，但一旦触摸轮子，它们就会消失。我错过了什么？

http://codepen.io/Aldlevine/pen/yGLqd

$num-wheels: 1;
$num-sides: 20;
$wheel-height: 10rem;

Answer 1

还有一个地方存在 10，应该更改为 20(请参阅下面代码中的注释):

$('.wheel').momentus({
  u: 1,
  mass: 1000,
  wheelRatio: -1000,
  mouseRatio: 6,
  onChange: function(coords, velocity){
    console.log('update');
    $('.wheel > div').each(function(i){
      var angle = -(coords.y/2) + (360/20)*i; // <-- CHANGE 10 to 20 HERE
      $(this).css('transform', 'perspective(500px) rotate3d(1,0,0,'+angle+'deg) translate3d(0,0,122px)');
    });
  }
});

如果您只进行此更改来运行它，则轮子中的面板太大了。为了让它看起来不错，您还应该将 $wheel-height 减半为 5rem。

• Demo