Как сделать массив экрана из 10000 делений с помощью jQuery? - PullRequest
Новая
       7

Как сделать массив экрана из 10000 делений с помощью jQuery?

1 голос
/ 12 марта 2012

Я новичок в jQuery и хочу сделать самодельный экран просто для удовольствия.

Внутри .container мне понадобится относительный позиционный класс div. Canvas (не HTML5) 1000px на 1000px, переполненный 10px на 10px абсолютных позиционированных div. так что все это прямолинейная сетка 10х10 квадратов. Я знаю, что для этого нужно иметь 100 координат и 100 координат.

Я знаю, что мог бы сделать функцию 'for' для повторения 10000 раз document.write ( ''); так как h переходит от = 0 к <100, затем v = v ++, снова h = 0 и т. д. до и включая h == 99 && v == 99, затем копирование и вставка всех этих записанных выводов html в документ как неаккуратный масса кода. Затем повторите тот же процесс, чтобы сгенерировать файл CSS для всех классов .V0 до .V99 и всех классов .H0 до .H99. Все V-классы будут занимать верхнюю позицию, а все H-классы - левую (с шагом в десять пикселей). Все размеры могут быть обозначены .Canvas div {position: absolute; ширина: 10px; высота: 10px;} </p>

Я бы хотел знать, как генерировать все эти маленькие ошибки на лету с помощью jQuery.

Я также хотел бы присвоить всем div одинаковые 1000px на 1000px background img, но каждое смещение с шагом 10px, так что если все деления непрозрачны, зритель видит все img как цельную сущность, а затем когда каждый случайно выбранный 10x10 дел с задержкой по времени падает до непрозрачности = 0, в нем появляется все больше и больше «дырок», пока он полностью не распадется и не обнаружится совершенно другой img, находящийся на z-индексе ниже.

Каким был бы элегантный способ обозначить положение фона для каждого из этих маленьких присосок? Есть ли какой-нибудь быстрый способ написания CSS с использованием «child», перечисление дочернего номера или?

Я знаю, что это много вещей, но, возможно, кому-то будет интересно дать мне несколько советов .. ??

Большое спасибо!

Майк в Лос-Анджелесе. Старый пердун, который только что изучал такие новомодные трюки в 63 года.

1 Ответ

0 голосов
/ 12 марта 2012

У меня не было спрайта для работы, но я делал это со случайными шестнадцатеричными значениями.Если вы хотите посмотреть, проанализировать и переварить, а затем вернуться ко мне с вопросами, я был бы рад помочь.

http://jsfiddle.net/8HyYt/

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

Я сделал холст 10000, как вы хотели, но он перегружает память Firefox, и в любом случае, вероятно, уничтожит большинство компьютеров.Но это примерный недостаток с моей стороны, а не с вашей стороны.Я также понимаю, что мой вопрос не был достаточно вперед в отношении сложности ситуации.Используя спрайт, я применил бы его обычно, например: 

#canvas div{
  background-image:url('path/to/my/sprite.png');
}

Затем, для каждого из найденных элементов div, мы можем рандомизировать позицию, на которую мы ссылаемся в нашем итераторе. 

var tenbyten = $(".tenbyten");
$.each(tenbyten, function(index,value){
  //accepting negative and positive values, working with a range of 1000, or -1000
  //and incrementing on values of 10, we have two randoms
  //one for the top position and one for the left position.
  var randomTop = Math.floor(Math.random()*100)*10 - 500;
  var randomLeft = Math.floor(Math.random()*100)*10 - 500;
  //for every element with a class of tenbyten found
  //we give it a random background within our sprite.
  $(this).css({"background-position" : randomTop+"px "+randomLeft+"px" });
});

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

Для приведенного выше примера я использовал «1000px», а не «10000px».Если вам нужно 10000px, то вам нужно изменить математику следующим образом: 

Math.floor(Math.random()*1000)*10 - 5000;

Это даст вам правильное значение.

...