웹 사이트 배경 변경 (이미지) 오순절 섹션

-2

나는 웹 사이트를 프로그래밍하고 그것을 변경하고 싶다. 내가 div에 도달했을 때 Backgroundimage 나는 내가 그것을 색을 바꿀 때 그것을해야한다는 것을 알았다. 배경)하지만 그것은 좀이웹 사이트 배경 변경 (이미지) 오순절 섹션

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>

,691,363 (210)

출처

2014-05-09 user3620808

난 당신이 같은 다른 게시물 보았다가, 당신이 여기에서 무엇을 달성해야하는지에 약간 불분명 해요 : http://stackoverflow.com/questions/23540959/how-to -change-background-image-with-static-css-and-maintain-it 또는 http://stackoverflow.com/questions/7832140/jquery-change-background-image – Alicia

예,이 정도는 좋지만 그 일이 일어나길 원합니다. 자동으로 아래로 스크롤 할 때 ... 가능합니까? – user3620808

이 시도 :

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

출처

2014-05-09 15:01:24 user3605845

고마워,하지만 그게 좋지 않아 내가 보는 것은 단지 색을 바꾼다는 것이지만 나는 배경 이미지를 바꾸고 싶다. – user3620808

웹 사이트 배경 변경 (이미지) 오순절 섹션

답변

관련 문제