javascript - JS : Event on ScrollDown and ScrollUp

Question

我目前有一个动画 Sprite ，它会在您按下键盘上的左右键时行走。我想做的是让 Sprite 在向下滚动时向右走，向上滚动时向左走。我还想让 Sprite 在用户停止滚动时停止行走。提前致谢!

我尝试将 $(window).scroll 函数与 current 和 lastscroll 位置的变量一起使用，但它没有用。

function walk(e) {
    var keyCode = e.keyCode;
    if (keyCode === 39) {
        key.right = true;
    } else if (keyCode === 37) {
        key.left = true;
    }
    if (key.right === true) {
        trans += 0;
        translate();
        sprite.classList.remove('left');
        sprite.classList.add('right');
        sprite.classList.add('walk-right');
    } else if (key.left === true) {
        trans -= 0;
        translate();
        sprite.classList.remove('right');
        sprite.classList.add('left');
        sprite.classList.add('walk-left');
    }
}

function stop(e) {
    var keyCode = e.keyCode;
    if (keyCode === 39) {
        key.right = false;
    } else if (keyCode === 37) {
        key.left = false;
    }
    if (key.right === false) {
        sprite.classList.remove('walk-right');
    } if (key.left === false) {
        sprite.classList.remove('walk-left');
    }
}

Answer 1

更新:

这是一个更好的版本；我为您将键盘和滚动代码合并到同一个事件中:

if (document.addEventListener) {
    // IE9, Chrome, Safari, Opera
    document.addEventListener("mousewheel", walk, false);
    // Firefox
    document.addEventListener("DOMMouseScroll", walk, false);
}else{
    // IE 6/7/8
    document.attachEvent("onmousewheel", walk);
}

function walk(e) {
    var e = window.event || e; // old IE support

    if (e.keyCode) {
        //keyboard input
        if (e.keyCode === 39) {
            key.right = true;
        } else if (keyCode === 37) {
            key.left = true;
        }
    }else{
        //scroll input
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        if (delta == 1) {
            //walk right
            key.right = true;
            key.left = false;
        }else if (delta == -1) {
            //walk left
            key.left = true;
            key.right = false;
        }else{
            //stop
            key.left = false;
            key.right = false;
            sprite.classList.remove('walk-right');
            sprite.classList.remove('walk-left');
        }
    }

    if (key.right === true) {
        trans += 0;
        translate();
        sprite.classList.remove('left');
        sprite.classList.add('right');
        sprite.classList.add('walk-right');
    } else if (key.left === true) {
        trans -= 0;
        translate();
        sprite.classList.remove('right');
        sprite.classList.add('left');
        sprite.classList.add('walk-left');
    }
}

上一个答案:

给你:

if (document.addEventListener) {
    // IE9, Chrome, Safari, Opera
    document.addEventListener("mousewheel", scroll, false);
    // Firefox
    document.addEventListener("DOMMouseScroll", scroll, false);
}else{
    // IE 6/7/8
    document.attachEvent("onmousewheel", scroll);
}


function scroll(e) {
    var e = window.event || e; // old IE support
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    if (delta == 1) {
        //walk right
        key.right = true;
        key.left = false;
    }else if (delta == -1) {
        //walk left
        key.left = true;
        key.right = false;
    }else{
        //stop
        key.left = false;
        key.right = false;
        sprite.classList.remove('walk-right');
        sprite.classList.remove('walk-left');
    }

    if (key.right === true) {
        trans += 0;
        translate();
        sprite.classList.remove('left');
        sprite.classList.add('right');
        sprite.classList.add('walk-right');
    } else if (key.left === true) {
        trans -= 0;
        translate();
        sprite.classList.remove('right');
        sprite.classList.add('left');
        sprite.classList.add('walk-left');
    }
}