javascript - Javascript Wheel动态能力

我遇到了我想实现的车轮脚本。但是，我需要使车轮面板保持动态。 SASS中已经有一个变量，但是如果我将其修改为20，并添加更多div元素，则滚轮仍仅显示10。看起来计算角度的mixins使用$ num-sides变量。首次加载时，我确实看到了额外的元素，但是只要触摸到轮子，它们就会消失。我想念什么？

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

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

最佳答案

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

关于javascript - Javascript Wheel动态能力，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27049682/