Question

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

类似于此处所做的操作：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“ 图片”应更改为“ 图片”。

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

我希望这会有所帮助。

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

1 个答案: