JavaScript 编码练习：添加动画使图片在页面上来回移动

最新推荐文章于 2023-10-24 20:20:31 发布

kllo__

最新推荐文章于 2023-10-24 20:20:31 发布

阅读量289

点赞数

分类专栏： javascript 文章标签： javascript 动画 css

本文链接：https://blog.csdn.net/kllo__/article/details/123088903

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

问题描述

根据以下给出的 HTML 和 CSS 代码，编写 JavaScript 代码使球水平弹跳。

#ball {
    position: relative;
    left: 0px;
}

<html>
 <head>
 </head>
 <body>
<p>
  <button id="start">Start</button>
  <button id="stop" disabled>Stop</button>
</p>

<div id="frame">
  <!-- Update the "src" attribute if you downloaded the image locally -->
  <img id="ball" src="https://raw.githubusercontent.com/bpesquet/thejsway/master/resources/basketball.jpg">
</div> </body>
</html>

显示结果：图片显示不出来

解决方法

我的，

//Write-Your-Code
const ballElement = document.getElementById("ball");
const startElement = document.getElementById("start");
const frameElement = document.getElementById("frame");
const stopElement = document.getElementById("stop");

const ballWidth = parseFloat(getComputedStyle(ballElement).width);
const movement = 7;
let animationId = null;
let direction = 1;
const moveBall = () =>
{
    const xBall = parseFloat(getComputedStyle(ballElement).left);
    const xMax = parseFloat(getComputedStyle(frameElement).width);
    //移动图片
    if (xBall + ballWidth > xMax || xBall < 0) {
    // Change direction
        direction *= -1;
     }   
    ballElement.style.left = `${xBall + movement * direction}px`;
    animationId = requestAnimationFrame(moveBall);
};

startElement.addEventListener("click", ()=>{  
     startElement.disabled = true;
     stopElement.disabled = false;
     
     //开始动画
     animationId = requestAnimationFrame(moveBall);
});

stopElement.addEventListener("click", () =>{
    stopElement.disabled = true;
    startElement.disabled = false;

    //停止动画
    cancelAnimationFrame(animationId);
});

参考答案：

const frameElement = document.getElementById("frame");
const ballElement = document.getElementById("ball");
// Movement value in pixels
const movement = 7;
// Convert ball diameter (value of the form "XXpx") to a number
const ballDiameter = parseFloat(getComputedStyle(ballElement).width);
// Animation ID - Global variable to access it from functions
let animationId = null;
// Minimal left position (left border)
const xMin = 0;
// Direction info - 1=right, 2=left
let direction = 1;

// Déplace le ballElement vers la gauche ou la droite
const animateBall = () => {
  // Convert the left position of the ball (value of the form "XXpx") to a number
  const xBall = parseFloat(getComputedStyle(ballElement).left);
  // Convert the width of the frame (value of the form "XXpx") to a number
  const xMax = parseFloat(getComputedStyle(frameElement).width);
  // If the ball is at an edge of the frame
  if (xBall + ballDiameter > xMax || xBall < xMin) {
    // Change direction
    direction *= -1;
  }
  // Move the ball in the current direction
  ballElement.style.left = `${xBall + movement * direction}px`;
  // Request another animation
  animationId = requestAnimationFrame(animateBall);
};

const startButton = document.getElementById("start");
const stopButton = document.getElementById("stop");

startButton.addEventListener("click", () => {
  // Change button states
  startButton.disabled = true;
  stopButton.disabled = false;
  // Start the animation
  animationId = requestAnimationFrame(animateBall);
});

stopButton.addEventListener("click", () => {
  // Change button states
  startButton.disabled = false;
  stopButton.disabled = true;
  // Stop animation
  cancelAnimationFrame(animationId);
});

kllo__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 编码练习：添加动画使图片在页面上来回移动

问题描述根据以下给出的 HTML 和 CSS 代码，编写 JavaScript 代码使球水平弹跳。#ball { position: relative; left: 0px;}<html> <head> </head> <body><p> <button id="start">Start</button> <button id="stop" disabled>
复制链接

扫一扫