Jquery旋转div

时间:2013-04-08 06:26:27

标签: jquery html rotation

我有疑问,因为我无法在jquery中找到一个用于执行此操作的插件

我需要例如10个divs容器,这些div显示浮动留下他的id等,我需要插件或者什么东西可以显示我想从这个10,20等div中显示的数字并显示为4组, 3,或我想要的数字,旋转或移动

例如显示前4个div和8之后,.....等并选择此过渡的效果

我需要这个,我看到很多插件,但没有作品展示这个,如果这个插件或脚本等可以让手动(手动或自动旋转 - 没有搜索滑块)移动箭头等完美但最重要的节目只我想要的div数量和旋转这些并显示其他div,当结束时显示其他时间的第一个div等等

如果没有完全理解所有

,感谢对不起

问候!!!

1 个答案:

答案 0 :(得分:1)

QTransform允许您旋转,倾斜,缩放和翻译,它可以跨浏览器工作。

QTransform.js下载并包含在您的HTML中。


<script src="js/qTransform.js"></script>

为div提供固定的高度 - 宽度并添加以下脚本:

$('#box4').delay(300).animate({rotate: '20deg'}, 500);
$('#box5').delay(700).animate({rotate: '50deg'}, 500);
$('#box6').delay(1200).animate({rotate: '80deg'}, 500);

其中(box4,box5&amp; box6是我的div id)。

delay(300), delay(700) & delay(1200)在300,500和1200毫秒后启动动画。最后的500是动画的持续时间。

如果您想手动提供旋转角度,可以这样做:

在变量中取角度。例如

var degAngle = 60;

并将其添加到脚本中,如

$('#box4').delay(300).animate({rotate: degAngle+'deg'}, 500);

您还可以提供缩放和旋转等多种效果。如,

$('#box4').delay(300).animate({scale: '1.5', rotate: '20deg'}, 500);


为何选择QTransform?

到目前为止,jQuery不支持CSS3动画。这个插件可以帮助您实现目标。

希望这适合你。