Question

我试图使图像面向它移动的方向。例如，播放器按下“向上”并且图像朝上。我怎么做到这一点？

代码：的Javascript

NULL

代码：HTML

hWnd

感谢您的帮助！

Answer 1

通常你的算法是正确的，但是你的语法和组织有很多问题

你应该用引号＆gt;包裹onclick值onclick="move_img('...')"
在您的内联CSS中 - 您缺少px单位，因此它应该是＆gt; left: 500px; top: 100px
在右侧按钮中 - 最后有一个额外的撇号（在结束>符号之前

虽然并非完全错误，但在某些情况下，offsetLeft和offsetTop与top和left不同 - 因此将它们放在一起并不明智

为了更改旋转，您应该使用transform CSS属性，以便JS使用element.style.transform访问它 - 值为rotate(Xdeg)其中X是您的度数想通过

这是一个有效的例子（我对HTML进行了一些更改，因为我没有图像，但逻辑保持不变）：

function move_img(side){
 var step = 10;
 var element = document.getElementById('braum');
 var left = parseInt(element.style.left);
 var top = parseInt(element.style.top);
 var rotation = 0;
    
 switch(side){
     case 'up': top-=step; rotation = -90; break;
     case 'right': left+=step; rotation = 0; break;
     case 'left': left-=step; rotation = 180; break;
     case 'down': top+=step; rotation = 90; break;
 }
 element.style.top = top+'px';
 element.style.left = left+'px';
 element.style.transform = 'rotate('+rotation+'deg)';
}

#braum{
  width: 40px;
  height: 40px; 
  color: white;
  text-align: center;
  transition: transform 0.5s; /* Remove This to remove the animation */
  background: green; 
  position:absolute; 
}

<div id='braum' style="left: 100px; top: 100px;">Hi</div>
    <input type="button" onclick="move_img('up')" value="up" >
    <input type="button" onclick="move_img('left')" value="left" >
    <input type="button" onclick="move_img('right')" value="right" >
    <input type="button" onclick="move_img('down')" value="down" >

使图像面部移动方向html

1 个答案: