У меня есть скрипт, который добавляет элементы в div, вращает их в течение заданного промежутка времени, затем, когда количество времени прошло, вращение останавливается, и случайный элемент в div оживляется.
У меня есть несколько вопросов:
если вы включите оповещения // alert(maxspeed) и //alert(maxcount) и нажмете «Выполнить» («Изменить»: сначала нажмите «Добавить все»), чтобы запустить скрипт, вы увидите, что значения начинаются с сложения / вычитания по ставкам из 0.1, но проиграет с 0,00000001 или около того здесь или там, почему это так (возможно, проблема с памятью из-за плохого кодирования?)?
после нажатия кнопки «Выполнить» («Изменить»: сначала нажмите «Добавить все»), изображения начнут анимироваться, но почему анимация иногда бывает случайной? Когда все, что нужно сделать, это увеличить maxspeed на значение 0.1 за раз
Наконец; почему это, по-видимому, попадает в стадию «else» моего оператора if / else до того, как будут выполнены условия «if»?
Я новичок в JS / jQuery, поэтому прошу прощения за любое плохое кодирование (я следовал руководству для достижения эффекта поворота).
Вот мой jsFiddle http://jsfiddle.net/pAk9N/9/ и код jQuery ниже, спасибо:)
$(document).ready(function(){
//You can edit the following file paths to change images in selection
var img1 = '<img src="/img/logo.png">';
var img2 = '<img src="/img/logo.png">';
var img3 = '<img src="/img/logo.png">';
var img4 = '<img src="/img/logo.png">';
var img5 = '<img src="/img/logo.png">';
var img6 = '<img src="/img/logo.png">';
var all = img1 + img2 + img3 + img4 + img5 + img6;
//Rotation part 1
var maxspeed = 0.00;
var minspeed = 0.01;
var stopped = 0.0;
var speed = maxspeed;
var radius = 100;
var count = 0;
function rotate()
{
var centerx = $(document).width()/2;
var centery = $(document).height()/2;
var num_items = $("#container > img").length;
$("#container > img").each(function(){
var angle = count * (Math.PI/180);
var newx = centerx + Math.cos(angle)*radius - $(this).width()/2;
var newy = centery + Math.sin(angle)*radius - $(this).height()/2;
$(this).css("left",newx+"px").css("top",newy+"px");
count += 360/num_items + speed;
});
}
//Rotation part 2
setInterval(rotate,1000/360);
$(document).mousemove(function(e)
{
var dw = $(document).width();
var dh = $(document).height();
var itemh = $("#container > img").height();
var itemw = $("#container > img").width();
if (e.pageX > dw/2-radius-itemw/2 && e.pageX < dw/2 + radius + itemw/2 && e.pageY > dh/2-radius-itemh/2 && e.pageY < dh/2+radius+itemh/2)
{
speed = minspeed;
}
else
{
speed = maxspeed;
}
});
//Append elements to container
$("#appendall").click(function(){$('#container').append(all);});
$('#append').children().eq(2).click(function(){$('#container').append(img1);});
$('#append').children().eq(3).click(function(){$('#container').append(img2);});
$('#append').children().eq(4).click(function(){$('#container').append(img3);});
$('#append').children().eq(5).click(function(){$('#container').append(img4);});
$('#append').children().eq(6).click(function(){$('#container').append(img5);});
$('#append').children().eq(7).click(function(){$('#container').append(img6);});
//Refresh page
$("#reset").click(function(){location.reload();});
//IF speed is greater than 0 - ELSE add animation to div element
$("#run").click(function(){
var maxcount = 1.00;
var incdec = 0.01;
counter()
function counter()
{
if (parseFloat(maxcount) >= 0.00)
{
maxcount = parseFloat(maxcount) - parseFloat(incdec);
maxspeed = parseFloat(maxspeed) + parseFloat(incdec);
// alert(maxspeed)
//alert(maxcount)
setTimeout(counter,40);
}
else
{
maxspeed = 0;
//Find amount of div elements and add 1
var brewees = $('#container').children().length +=1;
//get a random number
var rand = (Math.floor(Math.random()*brewees));
var ap = '20px';
var ab = '#ddd';
var ad = 1000;
//match random number corrosponding child in div
$('#container').children().eq(parseFloat(rand))
.animate({padding: ap, background : ab}, {duration:ad});
}
}
});
});