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;
}

我想做的是以下内容：

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

随机背景图像应在鼠标移动距离（比方说）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>

现在您拥有了数组，只需更改onMouseMove上的图像：

$("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>

鼠标移动的随机背景图像

2 个答案: