jQuery围绕一个点旋转Div

时间:2014-05-21 08:54:03

标签: jquery rotation

我已经浏览了一下,但无法找到与答案类似的任何内容。

我试图让一些div元素绕中心点旋转。我让他们改变学位,但是他们不会滑动他们只是跳,而且他们自己也改变了方向。

这是jQuery:

$("document").ready(function(){
//arrange blocks in a circle
var block = $("#rotator div").get(),
increase = Math.PI * 2 / block.length,
x = 0, y = 0, angle = 0;

for (var i = 0; i < block.length; i++) {
    var elem = block[i];
    x = 140 * Math.cos(angle) + 150;
    y = 140 * Math.sin(angle) + 150;
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    var rot = 90 + (i * (360 / block.length));        
    angle += increase;
}
        $('.click').click(function() {

            var rotateDegree = $(this).data('rotate');


            $('#rotator').css({
                 '-moz-transform':'rotate(' + rotateDegree + 'deg)',
                 '-webkit-transform':'rotate(' + rotateDegree + 'deg)',
                 '-o-transform':'rotate(' + rotateDegree + 'deg)',
                 '-ms-transform':'rotate(' + rotateDegree + 'deg)',
                 'transform':'rotate(' + rotateDegree + 'deg)'
            });
        });

});

这是小提琴:http://jsfiddle.net/3VtML/

如果有人能帮我解决这个问题,我将非常感激。

0 个答案:

没有答案