鼠标移动时的随机背景图像

Question

我不是程序员，但由于一些基本的编程技能，我能够修改脚本。

我有我的 CSS（只需要适用于最新的浏览器）：

html {
background: url(bg/random.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

我想做的是：

• 读出“bg”目录中的所有图像。
• 将该目录中的随机图像显示为背景图像。

每次重新加载页面时都这样做很容易，我已经设法做到了。但棘手的部分来了：

• 每次鼠标移动（比如说）50px 的距离后，随机背景图像都会发生变化。
• 理想情况下，图像应该以大约 100 毫秒的快速过渡发生变化。

基本上高性能不是问题。但它越流畅越好。如果能得到一点帮助，我会很高兴的。不管是 PHP、JS、jQuery 还是别的什么的。

Answer 1

要获取目录中的所有文件，需要使用 PHP：

function directoryToArray($directory, $recursive) {
$array_items = array();
if ($handle = opendir($directory)) {
    while (false !== ($file = readdir($handle))) {
        if ($file != "." && $file != "..") {
            if (is_dir($directory. "/" . $file)) {
                if($recursive) {
                    $array_items = array_merge($array_items, directoryToArray($directory. "/" . $file, $recursive));
                }
                $file = $directory . "/" . $file;
                $array_items[] = preg_replace("/\/\//si", "/", $file);
            } else {
                $file = $directory . "/" . $file;
                $array_items[] = preg_replace("/\/\//si", "/", $file);
            }
        }
    }
    closedir($handle);
}
return $array_items;
}

（向@Ruel 和his post 致此代码）

然后您可以将数组回显到您的 javascript 中：

<script type="text/javascript">
var images = new Array(
<?php
    $images = directoryToArray("bg", true);
    for($i = 0; $i < count($images); $i++)
    {
        echo "\"{$images[$i]}\"";
        if($i != (count($images)-1))
            echo ",";
    }
?>
</script>

现在你有了数组，只需在鼠标移动上更改图像：

$("body").mousemove(function(){

    $(this).css("background", "url('" + images[Math.floor(Math.random() * images.length)]+"')");

});

Answer 2

首先，用PHP获取目录下的所有图片。

<?php
$images = array_map('basename', glob('path/to/images/*{.gif,*.GIF,*.jpg,*.JPG,*.jpeg,*.JPEG,*.png,*.PNG}', GLOB_BRACE));
?>

这将获取文件夹path/to/images 中的所有图像。 basename() 去掉所有的绝对路径，只得到一个文件名数组。

现在我们需要在 JavaScript 中对它们进行处理，所以在您的网页上，让我们将它们放入一个 JavaScript 数组中：

<script>
var images = <?php print json_encode($images); ?>;
</script>

通过使用json_encode()，我们将 PHP 数组转换为 JavaScript 可以使用的数组。

接下来，让我们预加载图像（我自己是 jQuery 粉丝）。

<script>
(function ($) {
    $(function () {
        var images = <?php print json_encode($images); ?>;
        $.each(images, function (i, image) {
            $('<img src="path/to/images/'+image+'" style="width: 1px; height: 1px; left: -9999px;">').appendTo($('body'));
        });
    });
})(jQuery);
</script>

Then we can attach a `mousemove` event:

<script>
(function ($) {
    $(function () {
        var images = <?php print json_encode($images); ?>;
        $.each(images, function (i, image) {
            $('<img src="path/to/images/'+image+'" class="random_image">').appendTo($('body'));
        });

        var x = 0, y = 0;
        $(document).mousemove(function (v) {
            var nx = v.clientX, ny = v.clientY;
            if (Math.abs(nx-x) + Math.abs(ny-y) > 50) {
                $('.random_image').removeClass('show').eq(Math.floor(Math.random()*images.length)).addClass('show');
                x = nx;
                y = ny;
            }
        }).mousemove();
    });
})(jQuery);
</script>