0

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

4

1 回答 1

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>
于 2013-11-24T12:07:00.993 回答