在简单的 javascript 动画中替换图像

Question

我希望对此有所帮助。

我在一个页面上有四个动态 gif，随机移动。

<div class="backgroundWrapper">
    <img id="bee1" class="hidden-xs bee clockBee1" src="https://purl.co.nz/testRecipientID_Test/img/clockBee1.gif">
    <img id="bee2" class="hidden-xs bee clockBee2" src="https://purl.co.nz/testRecipientID_Test/img/clockBee1.gif">
    <img id="bee3" class="hidden-xs bee clockBee3" src="https://purl.co.nz/testRecipientID_Test/img/clockBee3.gif">
    <img id="bee4" class="hidden-xs bee clockBee4" src="https://purl.co.nz/testRecipientID_Test/img/clockBee3.gif">
</div>

当 gif 从左向右移动时，我希望它成为默认版本，但当它从左向右移动时，我想替换指向另一方向的另一个 gif。

var bees=document.getElementsByClassName("bee");

for(var i=0;i<bees.length;i++){
    animateDiv(bees[i]);
}


function makeNewPosition(){

    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh,nw];    

}

function animateDiv(theBee){
    theImage=$(theBee).attr("src");
    var newq = makeNewPosition();
    var oldq = $(theBee).offset();
    if(newq[1]<oldq.left){
        newImage=reverseImage(theImage);
        $(theBee).attr("src,newImage");
    }else{
        newImage=revertImage(theImage);
        $(theBee).attr("src,newImage");
    }
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $(theBee).animate({ top: newq[0], left: newq[1] }, speed, function(){
    animateDiv(theBee);        



    });

}

function calcSpeed(prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.1;

    var speed = Math.ceil(greatest/speedModifier);

    return speed;

}

function reverseImage(imgSource){
    var newImage="";
    if(imgSource=="img/clockBee1.gif"){
        newImage="img/clockBee1Reversed.gif";
    }
    else if(imgSource=="img/clockBee3.gif"){
        newImage="img/clockBee3Reversed.gif";
    }
    return newImage;
}
function revertImage(imgSource){
    var newImage="";
    if(imgSource=="img/clockBee1Reversed.gif"){
        newImage="img/clockBee1.gif";
    }
    else if(imgSource=="img/clockBee3Reversed.gif"){
        newImage="img/clockBee3.gif";
    }
        return newImage;
}

请看这个fiddle。我希望我做对了，因为这是我第一次使用 JSFiddle。

第 25 到 31 行是我遇到的问题。当我在 Chrome 中检查页面时（您也可以在 JSFiddle 中这样做吗？），我可以看到位置值在变化，但 src 始终保持不变。第 58-77 行包含（丑陋的）替换代码。

我希望这些信息足够了。有没有请问

提前致谢，

马尔科姆

Answer 1

我在您的代码中发现了 2 个问题：

您没有正确使用 Jquery attr（正确的语法是 $( "selector" ).attr( "attribute", "new value" ) 注意逗号不在 "";
在 revertImage 和 reverseImage 中，您正在使用 if(imgSource==="img/clockBee1Reversed.gif") 检查不正确的图像路径，因为路径类似于：https://purl.co.nz/testRecipientID_Test/img/clockBee1.gif

更好的方法是避免检查路径，只检查路径是否包含单词 Reversed it.The 更新后的代码如下所示：

  function reverseImage(imgSource){
if(imgSource.indexOf('Reversed')!==-1)// if the image is already reversed we don't do anything we just return the original path
   return imgSource;
    var newImage="";
    /*we remove the .gif from the image source*/
    var basePath=imgSource.slice(0,-4)
   /*we add the Reversed.gif to the image source*/
    newImage=basePath+'Reversed.gif'
    return newImage;
}
function revertImage(imgSource){
  // if the image is not reversed we don't do anything we just return the original path
  if(imgSource.indexOf('Reversed')===-1)
return imgSource;
    var newImage="";   
    /*we add the Reversed.gif from the image source*/
    var basePath=imgSource.slice(0,-12)
    /*we add the .gif to the image source*/
    newImage=basePath+'.gif'
    return newImage;
}

这是您在 JSFiddle

上的代码的工作版本

顺便说一下，revertImage 和 reverseImage 可以通过一些代码修改合并为一个函数。（供您参考，JSFIddle 显示 javascript 错误 :)）

在简单的 javascript 动画中替换图像

substituting images in simple javascript animation

javascript

animation

image

src