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

【问题标题】：i want to set animated background size and position on javascript我想在 javascript 上设置动画背景大小和位置
【发布时间】：2016-11-17 22:10:50
【问题描述】：

这是我要设置背景大小和位置的代码：

$(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]);

});

我该怎么做？

【问题讨论】：

设置背景大小和位置有什么问题？您已经在使用css() 方法了吗？此外，如果所有图像共享相同的设置，您可以在样式表中设置这些规则，而不是通过 JS

标签： javascript jquery css

【解决方案1】：

如果你想要动画，那么在这种情况下你应该使用随机函数：

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]);

});

【讨论】：