动态改变所有的样式标签

Question

我试图通过更改 div 中 img 标签的位置来模拟晃动。

我让它一次只处理一张图片。

有没有办法一次性改变div中所有img标签的样式？

这就是我当前正在做的事情：

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 函数也在 body 的 onLoad 处：

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

注意：imgs 是绝对的

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");

获取容器对象，然后获取该容器中的所有图像对象。你可以在jsFiddle中看到相应的HTML。该代码实现了一种定位方案，该方案在边缘处减慢速度，并在范围中间速度最快。运动的其余部分由 shakeAll() 中声明的变量的初始值控制。这些可以被编辑或更改以传递到函数中。

Answer 2

为您想要摇动的所有图像指定一个通用的类名称。然后，用户 getElementsByClassName() 而不是 getElementById() 返回一个数组具有特定类名的元素。然后使用循环来为每个动画设置动画。

但如果您希望所有图像都具有动画效果，请使用 element.getElementsByTagName() 或document.getElementsByTagName() 反而。