Question

您好我们正在使用jquery rotatble插件来旋转div

$( function() {

      $('.new-multiple').rotatable();
});

.new-multiple{
  display:inline-block;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.css">
<script src="https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.min.js"></script>

<div class="new-multiple">

   <img src="https://www.gravatar.com/avatar/322f808cb7a7e06d38ca4c8a441332fd?s=48&d=identicon&r=PG&f=1">
   </div>

但问题是它使用radiant选项旋转div。但我们需要使用度数旋转div。那是0到360度。我们如何实现这一目标

我试过

.rotatable({
        options: {
            degrees: true
        }
});

但这不起作用

Answer 1

如果您在https://github.com/godswearhats/jquery-ui-rotatable查看文档，则会看到：

int：以度为单位开始旋转（默认为0）

因此，您无法在尝试时使用该选项。它必须是0到360之间的true值，而不是$(function() { $('.new-multiple').rotatable({ degress: 45 }); });。

例如，如果您希望将旋转初始化为45度，则可以使用：

{"click_id": 123, "created_at": "2016-10-03T10:50:33", "product_id": 98373, "product_price": 220.50, "user_id": 1, "ip": "10.10.10.10"}
{"click_id": 124, "created_at": "2017-02-03T10:51:33", "product_id": 97373, "product_price": 320.50, "user_id": 1, "ip": "10.10.10.10"}
{"click_id": 125, "created_at": "2017-10-03T10:52:33", "product_id": 96373, "product_price": 20.50, "user_id": 1, "ip": "192.168.2.1"}

希望有所帮助。

Answer 2

因为我需要以度数获得旋转，我将给定弧度转换为停止事件中的度数

$('.new-multiple').rotatable({


        stop: function(e, ui){
             if(ui.angle.current<0){
                   var given_angle=ui.angle.current+2*Math.PI;
                }
                else{ var given_angle=ui.angle.current;  }
                var new_angle=Math.round(given_angle*180/ Math.PI)+"deg";
                $(".new-multiple").css("transform","rotate("+new_angle+")");
        }

    });

jQuery rotate（），度

2 个答案: