0

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

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

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

1 回答 1

2

还有一个地方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-heightto减半5rem。

于 2014-11-20T21:29:44.090 回答