0
我想旋轉多個div（三角形）到鼠標位置。我需要循環這些，因爲當我只使用一個類時，所有的移動都是相同的。問題是，這是很慢的，因爲我不能用這條線得到三角形：旋轉mousemove與多個div循環
$('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $(".triangle'+i+'"));})})
我希望有人能告訴我如何將所有mousemoves綁定一次或如何我可以修復它。 在此先感謝
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')
})
}