Question

我有一个使用onmousedown调用的动画。我有另一个停止动画的功能（onmouseup）。

问题是它只在第一次工作。我的意思是，当我按住按钮时，它会工作，然后当我停止按下时停止，但如果我在第一次尝试使用任何一个按钮后没有任何反应。它不会移动。

这是我的HTML代码（index.htm）：

<html>
<head><link rel='stylesheet' href='style.css'></head>
<body>
    <img id='player' src='img/player.png' style='height:64px;'></img>
    <div class='buttons'>
        <button id='moveleft' onmousedown="OnButtonDownl (this)" onmouseup="OnButtonUpl (this)"><--</button>
        <button id='moveright' onmousedown="OnButtonDownr (this)" onmouseup="OnButtonUpr (this)">--></button>
    </div>
</body>
</html>


<script type='text/javascript' src='move.js'></script>

这是我的javascript代码（move.js）：

var elem = document.getElementById("player");
function OnButtonDownl (button) {
var posl = document.getElementById("player").style.left;
window.idl = setInterval(framel, 5);
function framel() {
    posl--;
    elem.style.left = posl + 'px';
}}
function OnButtonUpl (button) {
    clearInterval(idl);
}

var elem = document.getElementById("player");
function OnButtonDownr (button) {
var posr = document.getElementById("player").style.left;
window.idr = setInterval(framer, 5);
function framer() {
    posr++;
    elem.style.left = posr + 'px';
}}
function OnButtonUpr (button) {
    clearInterval(idr);
}

可能不重要，但这是我的css（style.css）：

body {
  width: 100%;
  height: 100%;
position:relative;
margin:0;
overflow:hidden;
}
#player {
  position: absolute;
  left:0;
  bottom:0;
}
.buttons {
position:absolute;
right:0;
bottom:0;
}

感谢您提前提供任何帮助。

Answer 1

首先，将脚本标记放在html标记中是个好习惯：

<html>
<head>...</head>
<body>...</body>
    <script type='text/javascript' src='move.js'></script>
</html>

完成检查此解决方案：

HTML：

<html>
<head><link rel='stylesheet' href='style.css'></head>
<body>
    <img id='player' src='https://placeimg.com/54/45/any' style='height:64px;'></img>
    <div class='buttons'>
        <button id='moveleft' onmousedown="OnButtonDown('left')" onmouseup="OnButtonUp()"><--</button>
        <button id='moveright' onmousedown="OnButtonDown('right')" onmouseup="OnButtonUp()">--></button>
    </div>

<script type='text/javascript' src='move.js'></script>
</body>
</html>

和js：

var nIntervId;
var b;
var elem = document.getElementById("player");

var posl = document.getElementById("player").style.left;

function OnButtonDown(button) {
b = button;
nIntervId = setInterval(frame, 5);
}

function frame() {
  if(b==='left'){
    posl--;
    elem.style.left = posl + 'px';}
  else{
    posl++;
    elem.style.left = posl + 'px';
  }
}

function OnButtonUp() {
    clearInterval(nIntervId);
}

http://output.jsbin.com/varaseheru/

Answer 2

我重写了你的代码并且它有效（对我而言）。

function Move(elem){
    this.interval;

    var posr = parseInt(getComputedStyle(document.getElementById("player")).left);

    this.handleEvent = function(event) {
      switch (event.type) {
        case 'mousedown':
            this.interval = setInterval(function() {
                if (event.target.id == 'moveright') {
                    posr++;
                } else if (event.target.id == 'moveleft'){
                    posr--;
                }
                document.getElementById("player").style.left = posr + 'px';

            },5);
            break;
        case 'mouseup':
            clearInterval(this.interval);
            break;
      }
  }
  elem.addEventListener('mousedown', this,  false);
  elem.addEventListener('mouseup', this,  false);

}

var button_right = document.getElementById("moveright");
var button_left = document.getElementById("moveleft");

Move(button_right);
Move(button_left);

在html中你可以删除js事件监听器（这只需要id）。

Answer 3

您遇到了2个问题。

当您第一次获得posl和posr时，您将获得JS强制转移到0的空字符串。
追加--后，++和px无法工作（从而使posl和posr成为string值）

您的posl--（和posr++）可以增加强制0。这就是它第一次运作的原因。下次mousedown时，document.getElementById("player").style.left是一个字符串，如"-1px" - 不会被解释为假（不会被强制转换为0）。您可以在缓存parseInt() | posl时使用posr解决此问题，但由于parseInt("")返回NaN ...

你可以像这样解决这个问题（当你得到posr时有类似的变化）：

var posl = parseInt( document.getElementById("player").style.left, 10 ) || 0;

＆＃13;

var elem = document.getElementById("player");

function OnButtonDownl(button) {
  //var posl = document.getElementById("player").style.left;
  var posl = parseInt(document.getElementById("player").style.left, 10) || 0;
  window.idl = setInterval(framel, 5);

  function framel() {
    posl--;
    elem.style.left = posl + 'px';
  }
}

function OnButtonUpl(button) {
  clearInterval(idl);
}

var elem = document.getElementById("player");

function OnButtonDownr(button) {
  //var posr = document.getElementById("player").style.left;
  var posr = parseInt(document.getElementById("player").style.left, 10) || 0;
  window.idr = setInterval(framer, 5);

  function framer() {
    posr++;
    elem.style.left = posr + 'px';
  }
}

function OnButtonUpr(button) {
  clearInterval(idr);
}

＆＃13;

body {
  width: 100vw;// changed for example only
  height: 100vh;// changed for example only
  position: relative;
  margin: 0;
  overflow: hidden;
}
#player {
  position: absolute;
  left: 0;
  bottom: 0;
}
.buttons {
  position: absolute;
  right: 0;
  bottom: 0;
}

＆＃13;

<img id='player' src='//placekitten.com/102/102' />
<div class='buttons'>
  <button id='moveleft' onmousedown="OnButtonDownl (this)" onmouseup="OnButtonUpl (this)">Left</button>
  <button id='moveright' onmousedown="OnButtonDownr (this)" onmouseup="OnButtonUpr (this)">Right</button>
</div>

＆＃13;

Javascript - 动画仅在按下按钮时才起作用

3 个答案: