Случайное фоновое изображение при движении мыши

Question

Случайное фоновое изображение при движении мыши

0

Я не программист, но я могу модифицировать скрипты из-за некоторых базовых навыков программирования.

У меня есть мой 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".
Отображение случайного изображения из этого каталога в качестве фонового изображения.

Выполнение этого для каждого раза, когда вы перезагружаете страницу, легко, и я уже успел это сделать. Но здесь идет сложная часть:

Случайное фоновое изображение должно меняться каждый раз после того, как мышь перемещала расстояние (допустим) 50 пикселей.
В идеале изображение должно меняться с быстрым переходом вроде 100 мс.

В основном высокая производительность не является проблемой. Но чем более гладкая она работает, тем лучше. Я был бы очень рад немного помочь. Неважно, если это PHP, JS, jQuery или что-то еще.

user3005494 20 март 2014, в 22:07

Источник

4

Я не хирург, но я уверен, что мог бы изменить человеческое тело с некоторыми базовыми навыками ножа. ;)
The Blue Dog 20 март 2014, в 20:51
0

@TheBlueDog, и вы не гарантируете хорошую работу с этим ножом, хахаха
DontVoteMeDown 20 март 2014, в 20:52
0

@DontVoteMeDown: Бинго!
The Blue Dog 20 март 2014, в 20:53
1

Лучше всего разбить свою идею на маленькие шаги и изучить, как это сделать, и вернуться, когда у вас возникнут проблемы с кодом. Это не сайт, для которого вы можете сделать это для меня / дать мне коды.
Class 20 март 2014, в 20:54

Показать ещё 2 комментария

Теги:

php

javascript

jquery

background

random

2 ответа

Ещё вопросы

Я не хирург, но я уверен, что мог бы изменить человеческое тело с некоторыми базовыми навыками ножа. ;)
@TheBlueDog, и вы не гарантируете хорошую работу с этим ножом, хахаха
Лучше всего разбить свою идею на маленькие шаги и изучить, как это сделать, и вернуться, когда у вас возникнут проблемы с кодом. Это не сайт, для которого вы можете сделать это для меня / дать мне коды.

David · Answer 1 · 2014-03-20T19-12-00.000Z

Чтобы получить все файлы в каталоге, вам нужно использовать 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;
}

(Shoutout @Ruel и его сообщение для этого кода)

Затем вы можете отбросить массив в свой 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>

Теперь, когда у вас есть массив, просто измените изображение наMouseMove:

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

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

});

M Miller · Answer 2 · 2014-03-20T18-38-00.000Z

Во-первых, получите все изображения в каталоге с PHP.

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

Это получает все изображения в path/to/images папки 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>

Благодарю. Я пытался использовать его, но пока безуспешно. Чего я не понимаю, почему вы используете тег <img> вместо того, чтобы помещать его в CSS (фон тела) ... только для предварительной загрузки ?