【发布时间】：2012-12-19 20:00:03
【问题描述】：
我正在尝试将多个 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')
})
}
【问题讨论】：