Rotate Block in Cycle
Привет всем читателям!
У меня возник вопрос: как сделать поворот на N-градусов (от -40 до +40| соответственно рандомом), для n-блоков.. дабы блоки добавляются в цикле с помощью php(и количество мы их точное никогда не знаем), и все должны быть повернуты, и желательно "раскиданы" внутри бОльшего блока.. Всем спасибо заранее.. Принимаются: мысли, ссылки, идеи, ну и самым большим призом был бы код P.s. просьба без сторонних фреймворков.. |
каким боком php+ html(xhtml)+css k javascript?
|
Очень интересно ) может быть php + ajax + html + css + js, пропустить ajax тут никак не получится. А дальше зависит от того что за блоки, можно использовать либо css transform https://developer.mozilla.org/en/CSS/transform, либо canvas и его rotate http://habrahabr.ru/qa/4758/, либо что то другое...
|
Цитата:
|
Цитата:
|
А вы видите слово div в тексте ТС? Он говорит про блоки, я могу еще раз написать - все зависит от содержимого блоков
|
Цитата:
Цитата:
ясно ведь сказано Цитата:
Цитата:
|
Дабы приунять холивар поясню: блок (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 совсем не пройдёт.. |
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";
}
|
То что вы хотите сделать из кода "спагетти" - не хорошо. Имхо, не стоит все складывать вместе. Получите отдельно все блоки через пхп, выведите в js переменную, а затем с помощью с js раскидайте их по странице как вам нужно - будет удобнее изменять в дальнейшем.
Раскидать рандомно: использовать margin, либо указать у родителя position: relative | absolute, и затем позиционировать элементы внутри с помощью left и top. Цитата:
|
Цитата:
Цитата:
|
Цитата:
var blocks = <?=$block?>;
(function () {
var block = document.createElement('DIV');
// задаем необходимые свойства
// left, top для позиционирования
// transform для поворота
document.getElementById('PARENT_ID').appendChild(block);
}())
Что то типа этого, где $blocks = [block1, block2, .., blockN]; Цитата:
|
Цитата:
 как раз своиство transform легко переносится в фильтры (IE 5.5+) - только присутствует маленкии баг при перевороте, но его можно убрать вычетом смещения PS dolbanya local , prostite za krivuyi rech :) |
Если говорить про кол-во совместимых браузеров то canvas тут явно проигрывает, не спорю )
|
Цитата:
а c использованием svg -это натуральнее и проще реализуется при использовании div код будет гораздо проще и короче |
Цитата:
|
К примеру, мне нужно загрузить картинку на сайт, повернуть на 45%, обрезать её как мне захочется и сохранить все это дело к себе на компьютер. Сделать все это без использования сервера. На canvas такая задача решается довольно просто, с использованием одних div что то не могу придумать решения. Но мы далеко отошли от темы, выбор технологии реализации определяется требованиями.
Цитата:
|
Цитата:
проводятся эксперименты-да на их вебмастерах есть надпись что не выполняет js-да отслеживает всего клоакинг и редирект частично -да гугл !-для аякс в адресе-да Ну и где обработка выполнение js кроме частично редиректов и клоакинга ? Цитата:
аргумент в ваших рассуждениях только один-потому что вам так хочется. это не аргумент |
Цитата:
Цитата:
Цитата:
|
Цитата:
И всё равно продолжаете херню нести не относящуюся к теме абсолютно Цитата:
|
Цитата:
Цитата:
Цитата:
|
Цитата:
Цитата:
Цитата:
может задуматься об mvc и подобном и не гнать туфту ? а шаблонизаторы как по вашему действуют? |
Цитата:
Цитата:
Цитата:
|
Цитата:
Цитата:
если бы у бабушки были яйца-она была бы дедушкой ясно с вами всё,классика -нарцисс окрылённый врождённой тупостью,подстраивающий ситуацию под свои желания больше сюда отвечать не буду чтоб не разводить холивар и не кормить троля |
вы видимо совсем не читаете, написано что все зависит от требований, где то лучше использовать DIV где то CANVAS. Странно что до вас это до сих пор не дошло.
|
какое отношение ваши ответы имеют к тому что спрашивал создатель темы? за исключением того, что вы решили похвастаться знанием слов :
canvas,ajax...?:-/ специально дублирую ещё раз его вопрос,надеюсь читать что написано умеете? в том что умеете читать написанное как вам хочется,не сомневаюсь,неоднократно доказали Цитата:
|
а чем вас не устроил мой первый ответ? я предложил два варианта в зависимости от того что больше подойдет, вы тролль, и сами того не осознаете. Вы начали этот спор, я его уже несколько раз пытался закончить, а вы все никак не угомонитесь.
|
Дамы и господа (дабы никого не обидеть), прошу, давайте жить дружно..
Поддержка в IE не обязательна (дабы "пинает" с сайта ослоюзеров..), за примерные коды благодарю, но хотелось бы конечно попросить привести полный, а то с "лёгким" холиваром подзапутался.. |
http://jsfiddle.net/TVQvx/9/ думаю что то в этом роде, если индексирование не принципиально. Иначе цикл нужно делать средствами пхп.
Проверял в хроме и в лисе, дальше сами. |
благодарю
|
| Часовой пояс GMT +3, время: 20:24. |