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 に答える