Как создать эффект картинок, брошенных в стол? - PullRequest
Новая
       21

Как создать эффект картинок, брошенных в стол?

0 голосов
/ 29 августа 2011

Я бы хотел создать эффект, когда в таблице будет куча картинок (выброшенных, без определенного порядка, кусочки картинок, покрывающих другие картинки, вертикальные, горизонтальные, скошенные и т. Д.), А также при наведении курсора на пользователя.изображение становится большим, но я понятия не имею, с чего начать.Пока что у меня есть список изображений, автоматически сгенерированный (в ul) из папки на сервере.Может ли кто-нибудь дать мне несколько советов о том, как это сделать?

У меня вопрос, как это сделать?Я никогда не делал такого эффекта удаленно, как это, или всегда искал плагины, но я бы хотел сделать это сам.

РЕДАКТИРОВАТЬ

Разбивка проекта:

  • Загрузка изображений из папки (эту часть я уже сделал)
  • Отображение их случайным образом в браузере (я не знаю, как сделать изображения похожими на кучуфотографий, брошенных в стол, неорганизованных, некоторые поверх других, повернутых под разными углами), вот где у меня больше проблем.
  • При наведении изображения увеличиваются до большого размера.(Я могу сделать это)
  • Если щелкнуть, изображение отображает некоторую дополнительную информацию (в этом я не уверен, но я предполагаю, что я буду добавлять div и просто динамически заполнять его информацией о нажатыхизображение)?

1 Ответ

1 голос
/ 29 августа 2011

Это моя версия "брошенного" эффекта:

HTML: 

<ul id="x">
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
</ul>

Javascript: 

var list = document.getElementById('x');
var elements = list.getElementsByTagName('li');
for (var i=0; i<elements.length; i++) {
    // random positon between 0px and 300px
    elements[i].style.left = Math.ceil(Math.random()*300) + 'px';
    elements[i].style.top = Math.ceil(Math.random()*300)+ 'px';

    // random angle between -90 and 90 degrees
    var rot = 'rotate(' + (Math.ceil(Math.random()*180) - 90) + 'deg)';
    elements[i].innerHTML = rot;
    // Firefox rotation
    elements[i].style.MozTransform = rot;
    // Safari/Chrome rotation
    elements[i].style.WebkitTransform = rot;
    // Opera Rotation
    elements[i].style.OTransform = rot; 
    // all the rest
    elements[i].style.roration = Math.ceil(Math.random()*180) - 90;
}

jsFiddle Demo

...