Question

我试图在页面自动加载时移动图像我的主要目标是让图像在我想要的方向上移动，这样我就可以添加墙壁，并在页面加载后立即移动和转动这是我的代码：

<owl:Class rdf:ID="Sun"> 
   ...
</owl:Class>

<body>
  <div class="container">
<img src="" class="maze" />
<img src="" class="player" />
</div>

///// 的JavaScript / Jquery的

body {
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges; }

.container {
 position: relative; }

.player {
position: absolute;
height: 5vh;
width: 5vh;
left: 40px;
top: 30px; }

}）;

Answer 1

您的（更新的）代码的问题在于您试图通过设置"down"属性的动画来移动它，但是没有这样的属性。要使元素向下移动，请添加到其现有的"top"属性。要使元素向上移动，请从其"top"属性中减去。

此外，要使元素向右移动，添加到其"left"属性，请不要从其"right"中减去，因为您已设置初始"left"但不是"right"。

换句话说，通过指定左上角设置初始位置，您可以通过修改顶部和/或左侧来更改位置。

$(document).ready(function() {
  $( ".player" ).animate({ "top": "+=50px" }, "slow" );
  $( ".player" ).animate({ "left": "-=80px" }, "slow" );
  $( ".player" ).animate({ "top": "+=50px" }, "slow" );
  $( ".player" ).animate({ "left": "+=30px" }, "slow" );
  $( ".player" ).animate({ "top": "+=50px" }, "slow" );
});

img { border: thin black solid; } /* border added to make demo element visible */

.container { position: relative; left: 100px; }

.player {
  position: absolute;
  height: 5vh;
  width: 5vh;
  left: 40px;
  top: 30px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<img src="" class="maze" />
<img src="" class="player" />
</div>

尝试使用.animate进行图像移动

1 个答案: