Question

我通过github分成了rainyday.js，这是一个由maroslaw在这个链接上创建的一个很棒的javascript程序：https://github.com/maroslaw/rainyday.js。基本上我尝试了他的演示页面和我自己的照片city.jpg并更改了适用的字段，以便我可以在本地运行它，最终在我自己的网站上运行，但只有图片加载，脚本本身才开始运行。我对html和javascript很新，所以我可能省略了一些非常简单的东西，但这里是演示代码的脚本：

    <script src="rainyday.js"></script>
    <script>
        function getURLParameter(name) {
            return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,''])[1].replace(/\+/g, '%20'))||null;
        }

        function demo() {
            var image = document.getElementById('background');
            image.onload = function () {
                var engine = null;
                var preset = getURLParameter('preset') || '1';
                if (preset === '1') {
                    engine = new RainyDay({
                        element: 'background',
                        blur: 10,
                        opacity: 1,
                        fps: 30,
                        speed: 30
                    });
                    engine.rain([ [1, 2, 8000] ]);
                    engine.rain([ [3, 3, 0.88], [5, 5, 0.9], [6, 2, 1] ], 100);
                } else if (preset === '2') {
                    engine = new RainyDay({
                        element: 'background',
                        blur: 10,
                        opacity: 1,
                        fps: 30,
                        speed: 30
                    });
                    engine.VARIABLE_GRAVITY_ANGLE = Math.PI / 8;
                    engine.rain([ [0, 2, 0.5], [4, 4, 1] ], 50);
                } else if (preset === '3') {
                    engine = new RainyDay({
                        element: 'background',
                        blur: 10,
                        opacity: 1,
                        fps: 30,
                        speed: 30
                    });
                    engine.trail = engine.TRAIL_SMUDGE;
                    engine.rain([ [0, 2, 0.5], [4, 4, 1] ], 100);
                }
            };
            image.crossOrigin = 'anonymous';

            if (getURLParameter('imgur')) {
                image.src = 'http://i.imgur.com/' + getURLParameter('imgur') + '.jpg';
            } else if (getURLParameter('img')) {
                image.src = getURLParameter('img') + '.jpg';
            }

            var youtube = getURLParameter('youtube');
            if (youtube) {
                var div = document.getElementById('sound');
                var player = document.createElement('iframe');

                player.frameborder = '0';
                player.height = '1';
                player.width = '1';
                player.src = 'https://youtube.com/embed/' + youtube + '?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1';
                div.appendChild(player);
            }
        }
    </script>

这是我命名背景并在目录中指定照片的地方。

<body onload="demo();">
    <div id="sound" style="z-index: -1;"></div>
    <div id="parent">
        <img id='background' alt="background" src="city.jpg" />
    </div>
</body>

整个rainyday.js脚本的实际代码可以在这里找到：https://github.com/maroslaw/rainyday.js/blob/master/rainyday.js

提前感谢您的任何帮助和建议！

从原始演示页面配置html页面

0 个答案: