Доброго времени суток. Ребята помогите пожалуйста. Написал скрипт для сайта с продуктом. В чем его суть. Продукт задал фоновой картинкой блока а в блоке по кругу движутся всякие возможные ингредиенты к этому продукту. Ну в общем:
-php выстраивает мой круг из продуктов по такой логике. Блоку квадратный 400х400 пикселей, он берет центр блока за точку 0(200;200) -начало координат. Ну и я беру радиус круга(r) за 200 и элементам даю стиль left и top, x и y соответственно. Таким образом у меня
|
Код:
|
x=r+r*cosA - el_width; y=r-r*sinA - el_height |
, где A - такой угол что A=0; A0=2*pi/(кол-во элементов) и при каждом новом элементе я A увеличиваю на A0.
Так я построил свой круг из элементов.
$this->csize = 400;//Размер квадратного блока с кругом внутри
$this->iwidth = 60;//Ширина картинок с папки images/flavors
$this->iheight = 42;//Высота картинок с папки images/flavors
$this->images = glob('images/flavors/*.png');
$a = 2*M_PI/(count($this->images));//шаг круга
$a0 = M_PI*1.5;//градус начала отсчета
$r = $this->csize/2;
foreach($this->images as $key=>$value){
$this->images[$key] = str_replace(array('images/flavors/','.png'), '', $value);
$this->top[$key]= ( $r*(1 - sin($a0)) ) + ($this->iheight/2);//от центра квадратного блока берем отсчет
$this->left[$key]= ( $r*(1 + cos($a0)) ) + ($this->iwidth/2.6);//и смещаем елементы по кругу
$a0 += $a;
}
<?php foreach ($this->images as $key=>$value){?>
<img id="<?=$key?>" src="<?=BASE?>images/flavors/<?=$value?>.png" alt="<?=$value?>" width="<?=$this->iwidth?>" height="<?=$this->iheight?>" style="top:<?=$this->top[$key]?>px;left:<?=$this->left[$key]?>px">
<?php }?>
-ну а дальше вне нужно сделать так что бы круг вращался с анимацией. Сначала я сделал так:
var css = $('#next').css(['top','left']);
$('current').animate({'top':css['top'],'left':css['left']}),slow);
То есть я брал координаты следующего элемента и перемещал в их предыдущий, но это оказалось неправильным вариантом. Так как js брал координаты следующего элемента до того как тот окончательно закончил движение и получался маленький круг.
По этому я повторил тоже что и было в php коде, только за угол начального отсчета я брал угол на котором лежит нулевой элемент.
function rotate(){
var images = $('#menu img').length;
var a = 2*Math.PI/images;
var r = $('#menu').height()/2;
var iheight = $('#menu img').height();
var iwidth = $('#menu img').width();
var y0 = +$('#menu #0').css('top').replace( 'px', '');
var y = y0 - iheight/2;
var a0 = Math.asin( 1 - y/r );
for(var i=0;i<images;i++){
a0 += a;
itop = ( r*(1 - Math.sin(a0)) ) + (iheight/2);
ileft = ( r*(1 + Math.cos(a0)) ) + (iwidth/2.6);
$('#menu #'+i).animate({'top':itop,'left':ileft}, 1200, 'easeOutQuart');
}
}
Проблема в том что нулевой элемент (при каком бы первичном положении он не был A=0 или A=-p/2 или A=p/2) далее угла pi/2 не перемещается. А если я ставлю его изначально на угол pi/2 он перемещается на один шаг вперед и на один назад (циклично).
Подскажите, пожалуйста, в чем проблема, если смогли понять о чем я (писал на быструю руку). Благодарю.
вариант по кругу ... 
