0

I actually want to change the background-image with mouse wheel, touchpad and touchscreen scroll, but I don't want the page to have the scroll bar. My idea is the page with no scrolling, which would change background images (from the list of about 5-7 images) when user turns mouse wheel, scrolls on touchpad or touchscreen. Is it possible? Html + javascript + css would be okay.

Kostsei
  • 99
  • 3
  • 8
  • Which platform / library / program are you using? If you tag the question with it it will greatly improve the changes of getting an answer. – Ciro Santilli OurBigBook.com Nov 24 '13 at 11:37
  • I want to know if it is possible. Almost the same thing is possible with jQuery, but when the page have the scrolling, but I want to make it without any scrollbars. Javascript, jQuery, css would be fine. – Kostsei Nov 24 '13 at 11:52

1 Answers1

1

using pure 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>
Mohamed Shaaban
  • 1,129
  • 6
  • 13