2d карусель, работает, но уверен - неоптимально.
Недавно начал изучать js. Сталкивался с различными каруселями, путался в коде, когда хотел переделать под свои нужды. Пришел к тому, что на jquery быстрей свою состряпать. Но захотелось изучить как же это делается без сторонних фреймворков и плагинов. Почитал статью JS-Анимация (http://learn.javascript.ru/js-animation) и воспользовавшись предоставленным кодом, написал вот такую карусельку http://learn.javascript.ru/play/wnCIjb . Знаю, что сделал неоптимально и неуниверсально. Еще и запутался, когда оптимизировал, приделал кучу ненужных переменных, часть уже убрал. Буду рад, если наставите на путь истинный)) . Сейчас изучаю js дальше, хочу сделать, чтобы эта карусель анимировалась по нажатию и движению мышью. На эту тему лучше не подсказывайте, сделаю, дам ссылку и выслушаю критику.
Даю ссылку http://learn.javascript.ru/play/sKS3nc . Сделал, работает местами корявенько. На данный момент сделал так http://learn.javascript.ru/play/orjntb . Можно задавать количество картинок по горизонтали и вертикали, но в IE не работает автоматическое добавление недостающих картинок. Теперь и в ie работает. http://learn.javascript.ru/play/MWYWTb Добавил комментарии, старался поподробней (может кому приготится). http://learn.javascript.ru/play/nKxGNb |
alko, совет: не перебирай массивы циклом for..in. Во-первых, туда может прилететь что-нибудь из прототипа. Если, например, для кроссбраузерности добавить Array.prototype.forEach туда, где таких методов нет. Во-вторых, в массиве могут быть не только числовые ключи. Например, RegExp.prototype.exec возвращает массив Array, но в нём есть свойства index и
input. И это нормально. Я это к тому, что есть нормальные способы: var idblock = ['lt','ct','rt','lm','cm','rm','lb','cb','rb']; var button = idblock.map(function (id) { return document.getElementById(id); }); |
Спасибо. Не знал, что можно так использовать map, вообще в синтаксисе еще плаваю. http://learn.javascript.ru/play/unV86
|
alko,
на время одной анимации неплохобы незапускать другие либо заканчивать предыдущую - в jquery stop |
jquery в этой карусели не использую. Но об этом косяке знаю, на очереди. Вся конструкция рушится, если часто кликать по кнопкам.
|
Цитата:
|
что то типа var progress = stop || (new Date - start) / opts.duration;
stop = 0 нормальный ход. stop = 2 экстренное завершение |
Спасибо за совет, не хочу делать экстренное завершение анимации, наверное это будет не красиво, но переменную stop ввел http://learn.javascript.ru/play/TUvNsc .
|
Собери картинку, игрушка.
alko,
зарисовка на тему ... только перемещаются не блоки а background ... похоже но не совсем. <!DOCTYPE HTML> <html> <head> <title></title> <style type="text/css">td.mouse{ height:98px; width:98px; text-align:center; margin:0px; background:url(http://dl9.glitter-graphics.net/pub/1432/1432279yonsqtq9b6.jpg) repeat; border-radius:0px; } table{ border-collapse:collapse; } td.circle:after{ content:''; display:block; width:20px; height:20px; background:#F00; border-radius:10px; margin:25% auto; } td.circle{ height:20px; width:20px; text-align:center; } td{ transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; -o-transition:all 1s; } </style> </head> <body> <script language="JavaScript" type="text/javascript"> for (var l = 5, k, t = document.createElement("table"), c = 0; c < l; c++) for (var tr = t.insertRow(c), s = 0; s < l; s++) { k = 1; if (0 == c || c == l - 1 || 0 == s || s == l - 1) k = 0; var td = tr.insertCell(s), n = 50 * (s - 1) + "% " + 50 * (c - 1) + "%"; k || s == c || 4 == s + c || (td.className = "circle", td.onclick = function (b, h) { return function () { for (var f, m = b && h ? -50 : 50, q = document.querySelectorAll("td"), g = b && 4 != b ? (f = b - 1, [6, 11, 16]) : (f = 5 * (h - 1), [6, 7, 8]), a = 0; a < g.length; a++) { var p = q[g[a] + f], d = getPosition(p); p.style.backgroundPosition = b && 4 != b ? d[0] + "% " + (d[1] + m) + "%" : d[0] + m + "% " + d[1] + "%" } } }(s, c)); k && (td.className = "mouse", td.style.backgroundPosition = n) } t.cellspacing = "0"; t.cellpadding = "0"; document.body.appendChild(t); function getPosition(a) { a = (window.getComputedStyle ? getComputedStyle(a, null) : a.currentStyle).backgroundPosition; a = a.match(/-?\d+(\.\d+)?/g) || [0, 0]; a[0] = 50 * Math.round(a[0] / 50); a[1] = 50 * Math.round(a[1] / 50); return a }; function go(a) { var b = document.querySelectorAll("td.circle"); a--; var c = Math.floor(Math.random() * b.length); b[c].onclick(); a && window.setTimeout(function () { go(a) }, 1500) }; </script> <input type="button" name="" value="go" onclick="go(5)"/> </body> </html> |
рони, очень интересно, коротко и эффективно. Дня два у меня наверное уйдет, чтоб разобраться в логике зарисовки.. Тоже думал сделать перемещение фонов, потому как, если инициировать анимацию "щипком" мыши, то цепляешь изображение вставленное в блок (что не красиво).
И сделал http://learn.javascript.ru/play/56G7kb |
Часовой пояс GMT +3, время: 23:06. |