Question

我实际上想用鼠标滚轮，触摸板和触摸屏滚动来更改背景图像，但我不希望页面有滚动条。我的想法是没有滚动的页面，当用户转动鼠标滚轮，在触摸板或触摸屏上滚动时，这将改变背景图像（从大约5-7个图像的列表中）。可能吗？ Html + javascript + css就可以了。

Answer 1

使用纯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>

背景图像更改滚动

1 个答案: