Question

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

我一次只为一个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函数也在onLoad of body

   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

为你想要摇动的所有imgs提供一个共同的类名。然后，用户getElementsByClassName()而不是getElementById（）返回具有特定类名的元素数组。然后使用循环为每个动画制作动画。

但如果您想要动画所有图片，请改用element.getElementsByTagName()或document.getElementsByTagName()。

动态更改所有<img/>标记的样式

2 个答案: