Question

我正在编程一个网站，并希望它更改它背景图像当我到达div盒子时我发现它就像我必须要做的时候我想改变它的颜色（背景）而不是它如何图片，有点像这样

http://www.formuswithlove.se/

但只是图片

这是代码如何使用颜色，如果它的帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{
    margin:0;
    padding:0;
    background:white;
}
div{
    width:100%;
    height:1600px;
}
</style>
<script type="text/javascript">
var section = {
    sections: [
        'section1',
        'section2',
        'section3'
    ],

    sectionOffset: {},

    sectionBackground: {
        'section1': 'rgb(0, 0, 0)',
        'section2': 'rgb(132, 132, 132)',
        'section3': 'rgb(255, 255, 255)'
    },

    currentSection: null
}

window.onload = function()
{
    var looplen = section.sections.length;

    for(var i = 0; i < looplen; ++i)
    {
        section.sectionOffset[section.sections[i]] = document.getElementById(section.sections[i]).offsetTop;
    }

    setTimeout("initialBackgroundChange()", 50);
}

window.onscroll = function()
{
    tryBackgroundChange();
};

function tryBackgroundChange()
{
    var looplen = section.sections.length,
        match,
        backgroundColor;

    for(var i = 0; i < looplen; ++i)
    {
        if(pageYOffset >= section.sectionOffset[section.sections[i]])
        {
            match = section.sections[i];
        }
    }

    if(match != section.currentSection)
    {
        section.currentSection = match;
        changeBackground();
    }
}

function changeBackground()
{
    var cbc, // Current background-color
        tbc, // Target backgrounc-color
        ri,  // Red incrementation
        gi,  // Green incrementation
        bi,  // Blue incrementation
        rgb, // Temporary color from cbc to tbc
        smoothness = 20; // Higher is smoother

    cbc = getStyle(document.body, 'background-color');
    cbc = cbc.substr(4, cbc.length-5);
    cbc = cbc.split(", ");

    tbc = section.sectionBackground[section.currentSection];
    tbc = tbc.substr(4, tbc.length-5);
    tbc = tbc.split(", ");

    ri = (tbc[0] - cbc[0]) / smoothness;
    gi = (tbc[1] - cbc[1]) / smoothness;
    bi = (tbc[2] - cbc[2]) / smoothness;

    for(var i = 1; i <= smoothness; ++i)
    {
        rgb = [
            Math.ceil(parseInt(cbc[0]) + (ri * i)),
            Math.ceil(parseInt(cbc[1]) + (gi * i)),
            Math.ceil(parseInt(cbc[2]) + (bi * i))
        ];

        setTimeout("document.body.style.backgroundColor = 'rgb(" + rgb.join(",") + ")'", i * (240/smoothness));
    }
}

function initialBackgroundChange()
{
    if(pageYOffset == 0)
    tryBackgroundChange();
}

function getStyle(elem, name)
{
    if (document.defaultView && document.defaultView.getComputedStyle)
    {
        name = name.replace(/([A-Z])/g, "-$1");
        name = name.toLowerCase();
        s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    }

    else if (elem.currentStyle)
    {
        if (/backgroundcolor/i.test(name))
        {
            return (function (el)
            { // get a rgb based color on IE
                var oRG=document.body.createTextRange();

                oRG.moveToElementText(el);

                var iClr=oRG.queryCommandValue("BackColor");

                return "rgb("+(iClr & 0xFF)+","+((iClr & 0xFF00)>>8)+","+
                        ((iClr & 0xFF0000)>>16)+")";
            })(elem);
        }

        return elem.currentStyle[name];
    }

    else if (elem.style[name])
    {
        return elem.style[name];
    }

    else
    {
        return null;
    }
}

</script>
</head>

<body>

<div id="section1"></div>

<div id="section2"></div>

<div id="section3"></div>

</body>
</html>

Answer 1

试试这个：

if($(document).scrollTop() == 400){
   $('body').css('background','red')
}

用部分更改网站背景（图像）

1 个答案: