Question

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

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

我希望有人可以告诉我如何一次绑定所有鼠标移动或如何解决它。提前致谢

            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')

            })
        }

Answer 1

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

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

使用多个div循环在mousemove上旋转

1 个答案: