Question

我目前有一个动画精灵，当你按下键盘上的左右键时会走路。我想要做的是当你向下滚动时向前移动精灵，向上滚动时向左走。我还想让精灵在用户停止滚动时停止行走。提前致谢！

我尝试使用带有当前和lastscroll位置变量的$（window）.scroll函数，但它没有用。

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');
    }
}

Answer 2

请改用document.addEventListener：

var currentY = 0;
document.addEventListener('scroll', function(e){
   // some logic
   key.right = false;
   key.left = false;

   currentY < window.pageYOffset ?  key.right = true : key.left = true;
   currentY = window.pageYOffset;
})

JS：向下滚动和向上滚动的事件

2 个答案: