Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.05.2012, 18:56
Аспирант
Отправить личное сообщение для gJam Посмотреть профиль Найти все сообщения от gJam
 
Регистрация: 21.07.2011
Сообщений: 92

Rotate Block in Cycle
Привет всем читателям!
У меня возник вопрос: как сделать поворот на N-градусов (от -40 до +40| соответственно рандомом), для n-блоков.. дабы блоки добавляются в цикле с помощью php(и количество мы их точное никогда не знаем), и все должны быть повернуты, и желательно "раскиданы" внутри бОльшего блока..
Всем спасибо заранее..
Принимаются: мысли, ссылки, идеи, ну и самым большим призом был бы код
P.s. просьба без сторонних фреймворков..
Ответить с цитированием
  #2 (permalink)  
Старый 10.05.2012, 19:00
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

каким боком php+ html(xhtml)+css k javascript?
Ответить с цитированием
  #3 (permalink)  
Старый 10.05.2012, 20:06
Интересующийся
Отправить личное сообщение для skymanrm Посмотреть профиль Найти все сообщения от skymanrm
 
Регистрация: 08.07.2011
Сообщений: 16

Очень интересно ) может быть php + ajax + html + css + js, пропустить ajax тут никак не получится. А дальше зависит от того что за блоки, можно использовать либо css transform https://developer.mozilla.org/en/CSS/transform, либо canvas и его rotate http://habrahabr.ru/qa/4758/, либо что то другое...
Ответить с цитированием
  #4 (permalink)  
Старый 10.05.2012, 20:37
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

Сообщение от skymanrm
либо canvas и его rotate
ну поверни мне div и его любое содержимое в канве
Ответить с цитированием
  #5 (permalink)  
Старый 10.05.2012, 21:03
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от dmitriymar Посмотреть сообщение
ну поверни мне div и его любое содержимое в канве
аналог div в канве Rect легко поорачиватся
Ответить с цитированием
  #6 (permalink)  
Старый 10.05.2012, 21:08
Интересующийся
Отправить личное сообщение для skymanrm Посмотреть профиль Найти все сообщения от skymanrm
 
Регистрация: 08.07.2011
Сообщений: 16

А вы видите слово div в тексте ТС? Он говорит про блоки, я могу еще раз написать - все зависит от содержимого блоков
Ответить с цитированием
  #7 (permalink)  
Старый 10.05.2012, 21:14
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

Сообщение от vadim5june
аналог div в канве Rect легко поорачиватся
чего? как фигура стала аналогом элемента html div?
Сообщение от skymanrm
А вы видите слово div в тексте ТС? Он говорит про блоки, я могу еще раз написать - все зависит от содержимого блоков
что canvas и её rotate может повернуть из того что не может css transform?
ясно ведь сказано
Сообщение от gJam
дабы блоки добавляются в цикле с помощью php(и..
а аякс каким боком здесь ,даже к канве?
Сообщение от skymanrm
может быть php + ajax + html + css + js, пропустить ajax тут никак не получится....

Последний раз редактировалось dmitriymar, 10.05.2012 в 21:29.
Ответить с цитированием
  #8 (permalink)  
Старый 10.05.2012, 21:50
Аспирант
Отправить личное сообщение для gJam Посмотреть профиль Найти все сообщения от gJam
 
Регистрация: 21.07.2011
Сообщений: 92

Дабы приунять холивар поясню: блок (div)
По поводу php он тут даже очень сильно связан с html/css/js так, что все блоки(ну вы поняли, что div'ы)) выводятся в цикле из ассоциативного массива..

Ajax тут не нужен, он лишняя нагрузка и трата ресурсов..

С ротэйтом я разобрался еле-еле вида:
style=”<?php $rotation=rand(1,10) – 5 ?>  /*тут только подправить диапазон и градус готов*/
-o-transform:rotate(<?php echo $rotation; ?>deg);
-webkit-transform:rotate<?php echo $rotation; ?>deg);
-moz-transform:rotate(<?php echo $rotation; ?>deg);”

Наглядный пример
Так вот в продолжении разговора: как все-таки "разбросать" блоки (div'ы, div'ы эти несчастные)) рандомно, вариант с включением php совсем не пройдёт..
Ответить с цитированием
  #9 (permalink)  
Старый 10.05.2012, 21:56
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

var col=document.getElementsByTagName('div');// если в отдельном элементе,заменить document на него
for (var i=0, m=col.length;i<m;i++)
 {
   col[i].style.left=случ число+"px";
   col[i].style.top=случ число+"px"; 	 
 }

Последний раз редактировалось dmitriymar, 10.05.2012 в 22:21.
Ответить с цитированием
  #10 (permalink)  
Старый 10.05.2012, 22:02
Интересующийся
Отправить личное сообщение для skymanrm Посмотреть профиль Найти все сообщения от skymanrm
 
Регистрация: 08.07.2011
Сообщений: 16

То что вы хотите сделать из кода "спагетти" - не хорошо. Имхо, не стоит все складывать вместе. Получите отдельно все блоки через пхп, выведите в js переменную, а затем с помощью с js раскидайте их по странице как вам нужно - будет удобнее изменять в дальнейшем.

Раскидать рандомно: использовать margin, либо указать у родителя position: relative | absolute, и затем позиционировать элементы внутри с помощью left и top.

Цитата:
что canvas и её rotate может повернуть из того что не может css transform?
поверьте - многое, не холивара ради )
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
canvas rotate розовый слоник Элементы интерфейса 1 22.03.2012 17:50
Возможность просмотра увеличенного изображения в cycle f1983 jQuery 1 30.08.2011 16:53
jQuery Cycle Plugin - position: absolute; brabuz jQuery 1 26.08.2011 15:56
Canvas rotate taty Элементы интерфейса 4 28.07.2011 09:55
коррекция кода harek13 jQuery 1 16.12.2010 17:13