Loops 使用多个divs循环在mousemove上旋转

我正在尝试将多个div（三角形）旋转到鼠标位置。我需要循环这些，因为当我只使用一个类时，所有的移动都是一样的。问题是它非常慢，因为我不能用这条线得到三角形：

$('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $(".triangle'+i+'"));})})

我希望有人能告诉我如何一次绑定所有mousemove或如何修复它。 提前谢谢

            for(i=0;i<28; i++){
                $('#stage').append('<div class="triangle'+i+'">')
                    tri()
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle0'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle1'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle2'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle3'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle4'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle5'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle6'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle7'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle8'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle9'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle10'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle11'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle12'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle13'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle14'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle15'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle16'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle17'));})})


                }


             }
            else if ($('.triangle1').length>=1) {
                reset()

            }

  function rotateOnMouse(e, pw) {
  var offset = pw.offset();
  var center_x = (offset.left) + ($(pw).width() / 2);
  var center_y = (offset.top) + ($(pw).height() / 2);
  var mouse_x = e.pageX;
  var mouse_y = e.pageY;
  var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
  var degree = (radians * (180 / Math.PI) * -1) +10;

   $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)');
   $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)');
   $(pw).css('-o-transform', 'rotate(' + degree + 'deg)');
   $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)');
 }

 });  

 function tri(){

        $('.triangle'+ i).css({
                'float':'left',
                'left': 50 +'px',
                'top': 50 + 'px',
                'width': 0+'px',
                'height': 0+'px',

                'margin': 50 + 'px',
                'cursor':'pointer',
                'border-left': 40 + 'px solid transparent' ,
                'border-right': 40 + 'px solid transparent' ,
                'border-top':80 + 'px solid black' 
            })
        $('#stage').mouseup(function() {
        $('#stage').unbind('mousemove')

            })
        }

（i=0；i=1）的

{
重置（）
}
功能旋转鼠标（e，pw）{
var offset=pw.offset（）；
var center_x=（offset.left）+（$（pw.width（）/2）；
var center_y=（offset.top）+（$（pw.height（）/2）；
var mouse_x=e.pageX；
var mouse_y=e.pageY；
var radians=Math.atan2（鼠标x-中心x，鼠标y-中心y）；
变量度=（弧度*（180/数学π）*-1）+10；
$（pw）.css（'-moz-transform'，'rotate（'+degree+'deg'）；
$（pw）.css（'-webkit transform'，'rotate（'+degree+'deg'）；
$（pw）.css（'-o-transform'，'rotate（'+degree+'deg'）；
$（pw）.css（'-ms transform'，'rotate（'+degree+'deg'）；
}
});  
函数tri（）{
$（'.triangle'+i）.css({
“float”：“left”，
“左”：50+像素，
“顶部”：50+像素，
“宽度”：0+“px”，
“高度”：0+“px”，
“边距”：50+像素，
'光标'：'指针'，
“左边框”：40+“px实心透明”，
“右边框”：40+“px实心透明”，
“边框顶部”：80+“px纯黑”
})
$（'#stage'）.mouseup（函数（）{
$（“#stage”）.unbind（'mousemove'））
})
}

这可能会有帮助，“用MozTransform替换-moz转换

    $(pw).style.MozTransform = 'rotate('+degree+'deg)';
    $(pw).style.WebkitTransform = 'rotate('+degree+'deg)';
    $(pw).style.OTransform = 'rotate('+degree+'deg)';
    $(pw).style.msTransform = 'rotate('+degree+'deg)';