Javascript車輪動態能力

Question

我遇到了這個我想要實現的車輪腳本。但是，我需要$輪面板是動態的。 SASS已經有了一個變量，但是如果我將其修改爲20，並添加更多div元素，那麼輪子仍然只顯示10.它看起來像使用$ num-sides變量計算角度的mixins。當第一次加載時，我會看到額外的元素，但只要車輪被觸摸，它們就會消失。我錯過了什麼？

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