页面刷新时随机图像显示顺序

Question

我是 Javascript 新手 - 我试图在每次刷新页面时以不同的顺序重新加载页面上的图像 - 这样您每次访问都会有一个新的网站安排。

与此处所做的类似：pauljung.co.uk

这里使用的函数是 MathRandom，它可以调整图像的大小并将它们放置在加载时的不同位置 - 但是我想知道在页面的 HTML 正文中究竟是如何调用图像的？

我尝试在正文中放置一个间隔 gif 并将其链接到 id=picture 的 JS，但这不会一次加载所有图像。

<img src="images/spacer.gif" id="Picture" alt="some image">

$(document).ready(function () {

    $('#picture > img').each(function () {

        var randomXs = ["0px", "5%", "10%"];
        var randomX2s = ["0px", "0px", "0px", "5%"];
        var randomYs = ["200px", "50px", "100px", "150px", "250px", "300px"];
        var randomY2s = ["0px", "5%"];
        var widths = ["35%", "30%", "20%", "20%", "20%", "40%"];

        if ($(window).width() > 1024) {
            var randomXs = ["0px", "5%", "10%", "15%", "30%", "20%"];
            var randomX2s = ["0px", "0px", "0px", "5%"];
            var randomYs = ["200px", "50px", "-100px", "100px", "150px", "250px", "300px"];
            var randomY2s = ["0px", "5%"];
            var widths = ["20%", "30%", "20%", "15%", "20%", "25%", "20%"];
        }

        if ($(window).width() > 1600) {
            var randomXs = ["0px", "5%", "10%", "15%", "30%", "20%"];
            var randomX2s = ["0px", "5%"];
            var randomYs = ["200px", "50px", "-100px", "100px", "150px", "250px", "300px"];
            var randomX2s = ["0px", "0px", "0px", "0px", "5%"];
            var widths = ["35%", "30%", "22%", "20%", "18%", "17%", "23%", "10%", "12%", "15%", "15%", "11%", "13%"];
        }

        var randomX = randomXs[Math.floor(Math.random() * randomXs.length)];
        var randomX2 = randomX2s[Math.floor(Math.random() * randomX2s.length)];
        var randomY = randomYs[Math.floor(Math.random() * randomYs.length)];
        var randomY2 = randomY2s[Math.floor(Math.random() * randomY2s.length)];
        var width = widths[Math.floor(Math.random() * widths.length)];

        $(this).css('width', width);
        $(this).css('margin-right', randomX2);
        $(this).css('margin-left', randomX);
        $(this).css('margin-bottom', randomY);
        $(this).css('margin-top', randomY2);
    });

});

Answer 1

现代浏览器对元素执行区分大小写的搜索

所以 HTML ID 区分大小写。

在这种情况下，id 'Picture' 应更改为 'picture'。

<img src="images/spacer.gif" id="picture" alt="some image">

我希望这会有所帮助。