带有句柄的jQuery div旋转答案

【问题标题】：jquery div rotation with handle带有句柄的jQuery div旋转
【发布时间】：2012-06-05 13:41:33
【问题描述】：

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用下一个/上一个演示中的下一个按钮查看jQuery Cycle Plugin，尤其是Intermediate Demos (Part 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>

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

DEMO HERE

【讨论】：

【解决方案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中测试了一下。

【讨论】：

此代码有效，但我想在按下按钮时旋转 div，当我离开按钮时它停止旋转
好的。那我误会你了。你不能只使用 CSS3，对于点击事件，你需要 JavaScript/Jquery。