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的角度并给出一个新的模式。

对不起，如果我的问题太长了，请参考笔！

等待答案！：）

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)');
   });
});

编辑：这是一个codepen（我也改变了一些代码）：

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

按输入范围更改rotateY角度

1 个答案: