我想在javascript上设置动画背景的大小和位置

i want to set animated background size and position on javascript

本文关键字：位置 背景 动画 javascript 设置      更新时间：2023-09-26

下面是我想要设置背景大小和位置的代码:

$(document).ready(function() {
    var header = $('body');
    //images
    var backgrounds = new Array(
        'url(image1)', 'url(image2)', 'url(image3)', 'url(image4)'
    );
    //animation
    var current = 0;
    function nextBackground() {
        current++;
        current = current % backgrounds.length;
        header.css('background-image', backgrounds[current]);
    }
    setInterval(nextBackground, 7000);
    header.css('background-image', backgrounds[0]);
});

我该怎么做呢?

如果你想要动画那么在这种情况下你应该使用random函数:

Math.random()函数返回[0,1]范围内的浮点伪随机数，即从0(包含)到但不包括1(不包含)，然后您可以将其缩放到所需的范围。实现为随机数生成算法选择初始种子;用户不能选择或重置。

注意，由于JavaScript中的数字是IEEE 754浮点数，具有四舍五入到最接近偶数的行为，因此下面函数所声明的范围(不包括Math.random()本身的范围)并不精确。如果选择非常大的边界(253或更大)，在非常罕见的情况下可以计算通常被排除的上限。

// Returns a random number between min (inclusive) and max (exclusive)
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
你的代码应该是 
$(document).ready(function() {
    var header = $('body');
    //images
    var backgrounds = new Array(
        'url(image1)', 'url(image2)', 'url(image3)', 'url(image4)'
    );
    //animation
    var current = 0;
    function nextBackground() {
        current++;
        //current = current % backgrounds.length;
        current = getRandomArbitrary(0,backgrounds.length;
        header.css('background-image', backgrounds[current]);
    }
    setInterval(nextBackground, 7000);
    header.css('background-image', backgrounds[0]);
});

和根据你的方法

$(document).ready(function() {
    var header = $('body');
    //images
    var backgrounds = new Array(
        'url(image1)', 'url(image2)', 'url(image3)', 'url(image4)'
    );
    //animation
    var current = 0;    
    function nextBackground() {
    if(current>=backgrounds.length)
    current = 0;              
        header.css('background-image', backgrounds[current]);
        current++;  
    }
    setInterval(nextBackground, 7000);
    header.css('background-image', backgrounds[0]);
});
相关文章：