如何在左侧滑块上旋转div

Question

如何使用div和JQuery旋转此slider？

向左滑动应向左旋转，向右滑动应向右旋转。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner" style="width:100px; height:100px; background-color:black;"></div>
<input type="range" value="0" min="-360" max="360" />

Answer 1

我们还可以extend生成rotate函数

＆＃13;

＆＃13;

var rotation = 0;
jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$('.slider').on('input',function() {
    rotation = parseInt($(this).val());
    $('.rotate').rotate(rotation);
});

＆＃13;

.rotate{
  background-color:black;
  margin:20px 20px 20px 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="rotate" style="width:100px; height:100px; background-
color:black; display:block; "></div>
<br/>

<input type="range" class="slider" value="0" min="-360" max="360" />

＆＃13;

＆＃13;

＆＃13;