javascript - 使用 dom 弹跳图像

Question

我有一个想法，我想实现各种图片在屏幕上弹跳的地方，学习者必须确定哪一张是正确的图片。

我在 Google 上搜索了javascript 图像弹跳，这是第一个结果，它有效，但使用了 Canvas：

var ctx = null;
var x_icon = 0;
var y_icon = 0;
var stepX = 1;
var stepY = 1;
var size_x = 23;
var size_y = 22;
var canvas_size_x = 480;
var canvas_size_y = 320;
var anim_img = null;

function draw() {
  var canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  anim_img = new Image(size_x, size_y);
  anim_img.onload = function() { setInterval('myAnimation()', 10); }
  anim_img.src = 'https://pbs.twimg.com/profile_images/3352183391/a16302aab7bd8742ad3e39a75454008a_normal.jpeg';
}
function myAnimation() {
  ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
 if (x_icon < 0 || x_icon > canvas_size_x - size_x) {stepX = -stepX; }
 if (y_icon < 0 || y_icon > canvas_size_y - size_y) {stepY = -stepY; }
	 x_icon += stepX;
	 y_icon += stepY;
 ctx.drawImage(anim_img, x_icon, y_icon);
}

draw()

<canvas id="canvas" width="480" height="320" style="border:solid 1px;"></canvas>

我真的很想把它做成一个智能手机应用程序，所以我的想法是只使用 dom 并询问 screen.width 和 screen.height。

问：有没有办法在不使用画布的情况下在 html 页面周围反弹小超链接图像？

标签： javascriptdomcanvas

Answer 1

您可以在图像元素上使用绝对位置，并简单地更新它的顶部/左侧值：

var ctx = null;
var x_icon = 0;
var y_icon = 0;
var stepX = 1;
var stepY = 1;
var size_x = 23;
var size_y = 22;
var anim_img = null;

function draw() {
  anim_img = new Image(size_x, size_y);
  anim_img.onload = function() { setInterval('myAnimation()', 10); }
  anim_img.src = 'https://pbs.twimg.com/profile_images/3352183391/a16302aab7bd8742ad3e39a75454008a_normal.jpeg';
  anim_img.style.position = 'absolute';
  document.body.append(anim_img);
}
function myAnimation() {
  if (x_icon < 0 || x_icon > window.innerHeight - size_x) {stepX = -stepX; }
  if (y_icon < 0 || y_icon > window.innerWidth - size_y) {stepY = -stepY; }
  x_icon += stepX;
  y_icon += stepY;
  anim_img.style.top = x_icon + 'px';
  anim_img.style.left = y_icon + 'px';
}

draw()