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。更新的代码如下所示：

  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动画替换图像

1 个答案: