javascript - 带有句柄的jQuery div旋转

Question

我想旋转 div，但是用 a handle ( button on its top-right corner )，我试过但我没有成功，所以如果有任何插件可以为我完成这项工作，请告诉我？谢谢 ！

Answer 1

您可能可以在这里找到解决方案： jQuery - CSS - Rotate Div by drag mouse event 这是一个类似的问题。

Answer 2

使用下一个/上一个演示中的下一个按钮查看jQuery Cycle 插件，特别是中间演示（第 2 部分） ：

HTML

<div id="divWrapper">
    <a href="#" id="handle">Rotate</a>

    <div id="divRotate">
        <div>This is content One...</div>
        <div>This is content Two...</div>
        <div>This is content Three...</div>
        <div>This is content Four...</div>
    </div>
</div>​

JS

$('#divRotate').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '#handle'
});​

在这里演示

Answer 3

如果它不必是 jquery，你可以使用 CSS3。

我用 CSS3 旋转制作了一个小示例脚本。

<style>
.divClass:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}
.divClass {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    width: 200px;
    height: 200px;
    background-color:orange;
}

</style>

<div class="divClass">
    <button style="float: right">42</button>
</div>

你可以把它放在一个 html 文件中，看看它是否是你想要的。

我实际上不知道它是否被所有主要浏览器支持，我只是在 Chrome 中测试了它。