динамически менять стиль всех тегов <img>

Question

Я пытаюсь смоделировать встряхивание, изменяя положение тегов img внутри div.

У меня работает один img за раз.

Есть ли способ изменить стиль всех тегов img внутри div сразу?

Это то, чем я сейчас занимаюсь

    bird = document.createElement('img');
bird.setAttribute('src',birdie);
    bird.setAttribute('class', 'birdie');
bird.setAttribute('id', id);
bird.setAttribute('onLoad', 'shakeAll()');
map.appendChild(bird);
birds++;
if(birdmap[0] == 0){
    birdmap = [id];
}else{
    birdmap+=[,id];
}

эта функция ShakeAll также находится в onLoad тела

   function shakeAll(){
if (birdmap[0] == 0) return;
i = 1;
while(i <= birds){
    shakeIt(birdmap[i]);
    i++;
}

setTimeout("shakeAll()",initialSpeed);
}

примечание: изображения абсолютно

    function shakeIt(id){
     shake = document.getElementById(id);
     j=1;
    while(j<4){
     if (j==1){
      shake.style.top=parseInt(shake.style.top)+distance+"px";
     }
     else if (j==2){
      shake.style.left=parseInt(shake.style.left)+distance+"px";
     }
     else if (j==3){
      shake.style.top=parseInt(shake.style.top)-distance+"px";
     }
     else{
      shake.style.left=parseInt(shake.style.left)-distance+"px";
     }
     j++;

    }
     //setTimeout("shakeIt(id)", 50);
    }

Answer 1

Я не мог точно сказать, что вы пытались сделать в своем коде.Вот некоторый код, который показывает основы перемещения некоторых изображений назад и вперед:

// quadratic easing in/out - acceleration until halfway, then deceleration
// t = time into the animation
// d = duration of the total animation
// b = base value
// c = max change from base value (range)
var easeInOutQuad = function (t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
};

var linearTween = function (t, b, c, d) {
    return c*t/d + b;
};

// cubic easing in/out - acceleration until halfway, then deceleration
var easeInOutCubic = function (t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t + b;
    return c/2*((t-=2)*t*t + 2) + b;
};


function shakeAll() {
    var container = document.getElementById("container");
    var imgs = container.getElementsByTagName("img");

    // save away original position
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].basePos = parseInt(imgs[i].style.left, 10);
    }

    var numShakes = 0;
    var maxShakes = 10;
    var range = 100;
    var direction = 1;
    var duration = 300;   // ms
    var startTime = (new Date()).getTime();
    var deltas = [];

    function shakeImgs() {
        var now = (new Date()).getTime();
        var elapsed = Math.min(now - startTime, duration);
        var delta = Math.round(easeInOutQuad(elapsed, 0, range, duration));
        delta *= direction;
        for (var i = 0; i < imgs.length; i++) {
            var basePos = imgs[i].basePos;
            if (direction < 0) {
                basePos += range;
            }
            imgs[i].style.left = (basePos + delta) + "px";
        }
        if (now - startTime >= duration) {
            startTime = now;
            direction *= -1;
            ++numShakes;
        }
        if (numShakes < maxShakes) {
            setTimeout(shakeImgs, 10);
        }
    }

    shakeImgs();
}

Рабочая демонстрация и HTML, показанные здесь: http://jsfiddle.net/jfriend00/ED5yA/

И вот забавный пример, который добавляет немного случайногодрожание (дрожание) анимации: http://jsfiddle.net/jfriend00/jM8jx/.

Основы получения списка изображений для работы с ним:

var container = document.getElementById("container");
var imgs = container.getElementsByTagName("img");

Получает объект контейнера, а затем получает всеобъекты изображения в этом контейнере.Вы можете увидеть соответствующий HTML в jsFiddle.Этот код реализует схему позиционирования, которая замедляет скорость по краям и идет быстрее всего в середине диапазона.Остальная часть движения контролируется начальным значением переменных, объявленных в shakeAll().Они могут быть отредактированы или могут быть изменены для передачи в функцию.

Answer 2

дать общее имя класса всем imgs, которые вы хотите потрясти.и затем пользователь getElementsByClassName () вместо getElementById () возвращает массив элементов, имеющих конкретное имя класса.затем используйте цикл для анимации каждого.

, но если вы хотите, чтобы ВСЕ imgs были анимированы, используйте element.getElementsByTagName () или document.getElementsByTagName () .