随机移动图片

Question

我有这个代码，据说可以让图像在页面上移动但是没有移动可以有人识别错误。

感谢。

我的HTML：

<div id="container"> <span id="random"><img src="poke.png"></span> </div>

我的JS：

<script>
function moveDiv() {
    var $span = $("#random");

    $span.fadeOut(270, function() {
        var maxLeft = $(window).width() - $span.width();
        var maxTop = $(window).height() - $span.height();
        var leftPos = Math.floor(Math.random() * (maxLeft + 1))
        var topPos = Math.floor(Math.random() * (maxTop + 1))

        $span.css({ left: leftPos, top: topPos }).fadeIn(270);
    });
};

moveDiv();
setInterval(moveDiv, 270);
</script>

我的CSS：

<style>span { display: inline-block; position: absolute;}</style>

Answer 1

尝试使用以下代码，它可能对您有帮助。

function moveDiv() {
    var $span = $("#random");

    $span.fadeOut(270, function() {
        var maxLeft = $(window).width() - $span.width();
        var maxTop = $(window).height() - $span.height();
        var leftPos = Math.floor(Math.random() * (maxLeft + 1))
        var topPos = Math.floor(Math.random() * (maxTop + 1))

        $span.css({ left: leftPos, top: topPos }).fadeIn(270);
    });
};

moveDiv();
setInterval(moveDiv, 270);

span { display: inline-block; position: absolute;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container"> <span id="random"><img src="http://hiroki.jp/wp-content/uploads/2011/06/google-chrome-logo-100x100.png"></span> </div>

Answer 2

正如您所见here，您的代码运行正常。在您的情况下代码不起作用的原因是因为在加载所有DOM时脚本未运行。

您可以将脚本代码打包成文档准备好

$(document).ready()

与上面提到的注释一样，这可以确保在加载DOM时运行代码。

Answer 3

It works只需将jQuery包含在您的代码中

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13; 您也可以将脚本代码包装在文档中。

$(document).ready()