使用 CSS 和 JavaScript 在 HTML 中点击按钮移动图片

HTML、CSS 和 JavaScript 是捆绑在一起的。这三种语言都有不同的选项和属性，尤其是 CSS 和 JavaScript。没有什么比不断地自己探索属性更好的方式来将它们根植于脑海中。一旦我们了解了足够的选项，制作具有不同外观的专业网站将不是一项艰巨的任务。

这是一个简单的任务，用于发现一些基本属性

任务：在按钮点击时，在不同方向上移动图像 10px。例如：点击右按钮时，图像应向右移动 10px。

方向

1. 向上
2. 向下
3. 右
4. 左
5. 右上斜线
6. 左上斜线
7. 左下斜线
8. 右下斜线

步骤：

1. 将图像插入网页
2. 为所有 8 个方向创建按钮
3. 为每个按钮编写 JavaScript 函数
4. 使用 CSS 为按钮设置样式
5. 测试工作

那么，让我们按照步骤开始编码

1. 创建一个新文件并将其保存为 .html 扩展名。
2. 我们可以将 CSS 和 JavaScript 代码嵌入其中，也可以创建外部文件并将它们链接到 html 文件。
3. 我们将使用 <style></style> 和 <script></script> 嵌入它们

基本骨架

观察颜色

4. 现在，我们需要使用 <img> 标签将图像插入网页

• 请注意，图像保存在与 html 文件相同的位置。

• 如果不是，请将完整路径分配给 src。

• 您还可以分配一个在线图像链接，但每次运行文件时；您都需要有活动的内部连接才能访问图像。

5. 现在，我们需要为 8 个方向构建 8 个按钮

• 在按钮上，我们可以写方向的名称，或者我们可以简单地显示箭头。
• 我们可以使用十进制或十六进制代码来访问这些代码。
• 以下是代码
  使用 &#code 例如：&#8592
  

• 我们将使用表格来排列按钮，使其方便且等距。
• 点击这些按钮时，我们会调用一个 JavaScript 函数，并将按钮的方向作为参数传递。
• 使用 <center></center>，我们将同时将图像和按钮表格居中排列。

HTML 代码

运行后

6. 现在是时候为按钮提供实际功能了，或者我们可以为元素添加样式，然后添加功能。

CSS

现在，让我们使用一些简单的属性为按钮添加一些样式

输出

使用的属性

JavaScript

我们在这里使用的功能是 CSS 属性：position。我们可以为该属性赋予五个不同的值

1. static - > 默认
2. relative
3. fixed (固定)
4. 绝对寻址
5. sticky

代码

说明

通过使用 .style，我们正在访问元素的 CSS。首先，我们将图像存储在一个变量 'a' 中，然后将其位置设置为 relative。因此，当我们尝试定位图片时，我们将能够使用 .left 和 .top 属性，并且位置是相对于其当前位置分配的。要使用 position 属性，我们必须先将其分配给某个值，然后使用点属性来改变元素的位置。

只有 left 和 top 属性可用，我们将不得不使用这两个属性来定位元素在所有方向上的位置

1. left(-) 向左
2. lefft(+) 向右
3. top(-) 向上
4. top(+) 向下
5. 左上：top(-) + left(-)
6. 右上：top(-) + left(+)
7. 左下：top(+) + left(-)
8. 右下：top(+) + left(+)

具体来说

1. 如果 b 等于 "left"，则 left 属性减去 10 像素。
2. 如果 b 等于 "right"，则 left 属性增加 10 像素。
3. 如果 b 等于 "up"，则 top 属性减去 10 像素。
4. 如果 b 等于 "down"，则 top 属性增加 10 像素。
5. 如果 b 等于 "top-right"，则 left 属性增加 10 像素，top 属性减去 10 像素。
6. 如果 b 等于 "top-left"，则 left 属性减去 10 像素，top 属性减去 10 像素。
7. 如果 b 等于 "bottom-right"，则 left 属性增加 10 像素，top 属性增加 10 像素。
8. 如果 b 等于 "bottom-left"，则 left 属性减去 10 像素，top 属性增加 10 像素。

输出