用jquery实现表的顺时针旋转 <table> <tr> <td> <div class="myDiv highlight"> <span>虎虎生威</span> </div> </td> <td> <div class="myDiv"> <span>生龙活虎</span> </div> </td> </tr> <tr> <td> <div class="myDiv"> <span>如虎添翼</span> </div> </td> <td> <div class="myDiv"> <span>卧虎藏龙</span> </div> </td> </table>
时间: 2023-12-23 12:06:31 浏览: 122
可以使用 jQuery 的 `animate()` 方法来实现表的顺时针旋转。首先需要设置表格的旋转中心点和旋转角度,然后通过 `animate()` 方法来实现动画效果。
以下是示例代码:
```javascript
$(function() {
// 设置旋转中心点和旋转角度
var center = "50% 50%";
var angle = 90;
var rotate = "rotate(" + angle + "deg)";
// 获取表格中的单元格并设置初始样式
var cells = $("table td");
cells.css({
"-webkit-transform-origin": center,
"-moz-transform-origin": center,
"transform-origin": center
});
// 点击按钮开始旋转
$("#rotateBtn").click(function() {
cells.each(function(i) {
// 计算每个单元格的旋转角度
var currentAngle = i * angle;
var transform = "rotate(" + currentAngle + "deg) " + rotate;
// 使用 animate() 方法实现动画效果
$(this).find(".myDiv").animate({
transform: transform
}, 1000);
});
});
});
```
其中,`rotateBtn` 是触发旋转的按钮,`.myDiv` 是每个单元格中的 div 元素,需要旋转这个元素来实现整个单元格的旋转。
阅读全文