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, время: 22:28. |