Изменение фонового изображения с помощью прокрутки

Я действительно хочу изменить фоновое изображение с помощью колесика мыши, сенсорной панели и прокрутки сенсорного экрана, но я не хочу, чтобы на странице была полоса прокрутки. Моя идея - это страница без прокрутки, которая будет менять фоновые изображения (из списка примерно 5-7 изображений), когда пользователь поворачивает колесико мыши, прокручивает тачпад или сенсорный экран. Является ли это возможным? Html + javascript + css будет нормально.


scroll touch background-image mousewheel touchpad
person Kostsei    schedule 24.11.2013    source источник
comment
Какую платформу/библиотеку/программу вы используете? Если вы пометите им вопрос, это значительно улучшит получение ответа.   -  person Ciro Santilli 新疆再教育营六四事件ۍ    schedule 24.11.2013
comment
Я хочу знать, возможно ли это. Почти то же самое возможно и с jQuery, но когда на странице есть прокрутка, а я хочу сделать ее без полос прокрутки. Javascript, jQuery, css подойдут.   -  person Kostsei    schedule 24.11.2013

Ответы (1)


arrow_upward
1
arrow_downward

используя чистый html/javascript/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>
person Mohamed Shaaban    schedule 24.11.2013
comment
Может быть, я недостаточно понимаю это, но не работает: thelocalgenius.com/patterns /faces-xi-mmxiii - person Kostsei; 24.11.2013
comment
Работает только при наличии полосы прокрутки. И не работает с тачпадом. - person Kostsei; 24.11.2013