스크롤로 배경 이미지 변경

마우스 휠, 터치 패드 및 터치 스크린 스크롤로 배경 이미지를 실제로 변경하려고하지만 스크롤 막대가있는 페이지는 원하지 않습니다. 내 아이디어는 스크롤이없는 페이지로, 사용자가 마우스 휠을 돌리거나 터치 패드 또는 터치 스크린에서 스크롤 할 때 배경 이미지 (약 5-7 이미지 목록에서)를 바꿀 것입니다. 가능한가? HTML + 자바 스크립트 + CSS는 괜찮을 것입니다.스크롤로 배경 이미지 변경

출처

2013-11-24 Kostsei

플랫폼/라이브러리/프로그램 사용중인를 사용하고 계십니까? 질문에 태그를 달면 답을 얻는 변화가 크게 향상됩니다. –

가능한지 알고 싶습니다. 거의 같은 일이 jQuery에서 가능하지만 페이지에 스크롤이있을 때 스크롤 막대가 없어도 만들 수 있습니다. 자바, jQuery, CSS는 괜찮을 것이다. – Kostsei

순수 HTML/자바 스크립트/CSS를

function addListeners() { 
// var bdy = document.body; 
    var bdy = document.body; 
    if (bdy.addEventListener) { 
     // IE9, Chrome, Safari, Opera 
     bdy.addEventListener("mousewheel", MouseWheelHandler, false); 
     // Firefox 
     bdy.addEventListener("DOMMouseScroll", MouseWheelHandler, false); 
    } 
    // IE 6/7/8 
    else bdy.attachEvent("onmousewheel", MouseWheelHandler); 

    return false; 
} 

var counter = 0 ; 
var maxCount = 4 ; 

function MouseWheelHandler(e) { 

    var bdy = document.body; 
    // cross-browser wheel delta 
    var e = window.event || e; // old IE support 
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 

    counter += delta ; 

    counter = counter%maxCount ; 

    if(counter < 0) counter = maxCount ; 

    bdy.style.backgroundImage = 'url(images/' + counter + '.jpg)' ; 
    return false; 
} 


<html> 
<head> 
    <script type="text/javascript" src="scripts.js" > 
    </script> 
</head> 
<body onload="return addListeners();"> 
</body> 
</html>

출처

2013-11-24 12:07:00 mshaaban

충분하지 않을 수도 있지만 작동하지 않습니다. http://thelocalgenius.com/patterns/faces-xi-mmxiii/ – Kostsei

스크롤 막대가있는 경우에만 작동합니다. 그리고 터치 패드로 제대로 작동하지 않습니다. – Kostsei

스크롤로 배경 이미지 변경

답변

관련 문제