jquery - 通过输入范围更改旋转Y Angular

Question

我在使用 Codepen 时遇到了问题。 Here is my pen我正在努力。

以下是标记(Haml 格式):

.planet
 -(1...100).each do |i|
  .circle

%input{:type => "range" ,:min => "0.1" ,:max => "360" , :step =>'1',:value => '1' ,:id => 'focal'}/

SCSS:

$n:100;
//play with this :D
$angle:22deg;
//////////////////
body{
background: #111;
}
.planet{
position: absolute;
margin: auto;
height: 300px;
width: 300px;
top: 0;
left: 0;
right: 0;
bottom: 0;
.circle{
  height: 250px;
  width: 250px;
  border:3px solid ;
  position: absolute;
  border-radius: 100%;
  @for $i from 1 through 100{
     &:nth-child(#{$i}){
        @include rotateY($angle * $i); 
        @include animation(sphere 0.8s linear infinite);
        border-color:hsl($i * 360 / $n, 100%, 50%);
        }
      }
   }  
 }

现在，我想做的是根据输入的值更改 $angle 值。这样每次拖动它时，它都会改变rotateY的 Angular 并给出一个新的图案。

抱歉，如果我的问题太长，请参阅笔!

等待答复! :)

Answer 1

我不知道任何 Haml，但您应该为每个圆添加一个带有起始度数 (data-starting_ Degrees="") 的数据属性，然后将您的 javascript 更改为:

$("#focal").on("input", function() {
   $(".circle").each(function(){

       var degrees = parseInt($("#focal").val()) + parseInt($(this).data("start-degrees"));
      console.log(degrees);
       $(this).css('transform', 'rotateY(' + degrees + 'deg)');
   });
});

编辑:这是一个代码笔(我也对代码进行了一些更改):

http://codepen.io/anon/pen/aOdRqx