jquery - рассеивает изображения в определенном пространстве, чтобы они не перекрывались - PullRequest
Новая
       30

jquery - рассеивает изображения в определенном пространстве, чтобы они не перекрывались

1 голос
/ 02 февраля 2012

Привет всем кодировщикам качества и прочим!

Я использую скрипт jquery (Автор: Marco Kuiper - www.marcofolio.net), который случайным образом размещает изображения в определенном пространстве. С помощью мыши изображения можно перетаскивать на экране, а затем нажимать для увеличения.

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

Вот текущий скрипт, который размещает изображения: 

        $(".polaroid").each
(function ()
    {
    var tempVal = Math.round(Math.random());
    if(tempVal == 1)
        { var rotDegrees = randomXToY(330, 360); } // rotate left
    else
        { var rotDegrees = randomXToY(0, 30); } // rotate right

    var position = $(this).parent().offset();
    var wiw = $(this).parent().width(); // width of div enclosing object
    var wih = $(this).parent().height(); // heiht of div enclosing object

    var leftpos = Math.random()*(wiw - $(this).width()) + position.left;
    var toppos = Math.random()*(wih - $(this).height()) + position.top;

    var cssObj =
        {
        'left' : leftpos,
        'top' : toppos,
        '-webkit-transform' : 'rotate('+ rotDegrees +'deg)',  // safari only
        '-moz-transform' : 'rotate('+ rotDegrees +'deg)',  // firefox only
        'tranform' : 'rotate('+ rotDegrees +'deg)' // if CSS3 is standard
        };
    $(this).css(cssObj);
    }
);

Моих навыков написания сценариев для этого недостаточно, поэтому любая помощь будет признательна.

Спасибо!

1 Ответ

0 голосов
/ 02 февраля 2012

Мне нужно было бы увидеть ваш HTML и CSS, чтобы помочь с компоновкой сетки, но что касается javascript, и если будет достаточно случайного вращения, вы можете просто удалить биты о позиционировании: 

$(".polaroid").each
  (function ()
    {
    var tempVal = Math.round(Math.random());
    if(tempVal == 1)
        { var rotDegrees = randomXToY(330, 360); } // rotate left
    else
        { var rotDegrees = randomXToY(0, 30); } // rotate right

    var cssObj =
        {
        '-webkit-transform' : 'rotate('+ rotDegrees +'deg)',  // safari only
        '-moz-transform' : 'rotate('+ rotDegrees +'deg)',  // firefox only
        'tranform' : 'rotate('+ rotDegrees +'deg)' // if CSS3 is standard
        };
    $(this).css(cssObj);
    }
  );
...