Question

我使用以下代码使几个GIF图像以随机方向在网页上移动：

HTML：

<div id="container">
  <div class='img01'> <img src="images/1.gif"> </div>
 <div class='img02'> <img src="images/2.gif"> </div>
 <div class='img03'> <img src="images/3.gif"> </div>
 <div class='img04'> <img src="images/4.gif"> </div>
 <div class='img05'> <img src="images/5.gif"> </div>
 <div class='img06'> <img src="images/6.gif"> </div>
 <div class='img07'> <img src="images/7.gif"> </div>
 <div class='img08'> <img src="images/8.gif"> </div>
 <div class='img09'> <img src="images/9.gif"> </div>
 <div class='img10'> <img src="images/10.gif"> </div>
 <div class='img11'> <img src="images/11.gif"> </div>
 <div class='img12'> <img src="images/12.gif"> </div>
 <div class='img13'> <img src="images/13.gif"> </div>
 <div class='img14'> <img src="images/14.gif"> </div>
 <div class='img15'> <img src="images/15.gif"> </div>
</div>

CSS：

div#container {height:500px;width:900;}

div.img01 {
position:fixed;
top:100px;
left:100px;
}

...

div.img13 {
position:fixed;
top:75px;
left:250px;
}

div.img14 {
position:fixed;
top:400px;
left:800px;
}

div.img15 {
position:fixed;
top:340px;
left:200px;
}

（我以相同的格式引用CSS中的每个<div>标签，每个标签的位置不同。我包括13,14和15，因为这些是我有一个问题。我包括1，所以你可以参考正常工作的那个。）

最后，JavaScript，嵌入在主HTML文档中：

$(document).ready(function() {
        animateDiv($('.img01'));
        animateDiv($('.img02'));
        animateDiv($('.img03'));    
        animateDiv($('.img04'));  
        animateDiv($('.img05'));
        animateDiv($('.img06'));
        animateDiv($('.img07'));
        animateDiv($('.img08'));
        animateDiv($('.img09'));
        animateDiv($('.img10'));
        animateDiv($('.img11'));
        animateDiv($('.img12'));
        animateDiv($('.img13'));
        animateDiv($('.img14'));
        animateDiv($('.img15'));

});

function makeNewPosition($container) {

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

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

    return [nh, nw];

}

function animateDiv($target) {
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

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

};

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;

}

除了13,14和15之外，所有图像都按照预期在页面上移动。它们都保留在页面的最顶部和最左边，一个图像堆叠在另一个上面。他们根本不动。

这三个图像完全没有什么不同。它们都是相同的文件格式，并且与其他图像的大小相似。我完全不知道他们为什么表现不好。

我非常感谢任何帮助。谢谢！

用于在页面上随机移动图像的JavaScript代码无法正常运行

0 个答案: