如何在 HTML 中移动图片?
可以使用 HTML img> 标签将图片添加到网页中。
<image> 标签没有结束标签，为空，仅包含属性。
使用 HTML 容器标签"marquee"，网页可以滚动显示从左到右(或从右到左)或从上到下(或从下到上)的文本或图片。然而，新的 HTML 版本 HTML 5.1 已弃用此标签。我们也可以使用简单的 HTML 属性来实现相同的效果。
我们将学习更多使用 CSS 属性以及各种 HTML 标签、JavaScript 和一些块级 CSS 来移动图片的方法。
算法
使用 <img> 创建的 HTML 文件标签用于移动图像。
添加 CSS 代码来移动图像。您可以使用"position"和"top"或"left"属性来移动图像。
保存 HTML 文件并在 Web 浏览器中打开，即可看到图像移动到新位置。
您也可以使用下面提供的不同方法在 HTML 中移动图像。
方法
使用 <marquee> 标签
使用 CSS 和 HTML 移动图像
HTML 图像标签
使用 JavaScript
使用 <marquee> 标签
借助 marquee 标签，在 HTML 中移动图形变得非常简单。它可用于制作滚动图形，使其垂直从上到下或从下到上移动，或水平从左到右或从右到左移动。marquee> 标签的默认行为是图片从右到左滚动。
<marquee> 标签的属性
方向:控制图片滚动的方向。此属性的值可以是左、右、上或下。
行为:此部分描述文本的滚动行为。它可以是交替、滚动或滑动等值。
语法
<marquee> <img src=""> </marquee>
Example 1
<!DOCTYPE html>
<html>
<body>
<center>
<!-- The image has scrolling behavior to left -->
<marquee behavior="scroll" direction="left">
<img src="https://www.cainiaomax.com/html/images/html-mini-logo.jpg" alt="Mountain landscape">
</marquee>
<!-- The image has scrolling behavior to the upper direction. -->
<marquee behavior="scroll" direction="up">
<img src="https://www.cainiaomax.com/html/images/html-mini-logo.jpg" alt="Cityscape">
</marquee>
</center>
</body>
</html>
示例 2
<!DOCTYPE html>
<html>
<body>
<center>
<marquee behavior="alternate" direction="left">
<img src= "https://www.cainiaomax.com/html/images/html-mini-logo.jpg" alt="Image 1">
</marquee>
<marquee behavior="alternate" direction="right">
<img src= "https://www.cainiaomax.com/html/images/html.jpg" alt="Image 2">
</marquee>
</center>
</body>
</html>
使用 CSS 和 HTML 移动图像
能够使用 HTML 移动图形是一项非常有用的技能。当拖放编辑器运行良好时，事情很简单，但当它们运行不良时，如果不手动编辑 HTML 源代码，移动照片就会非常困难。一些过时的技术在浏览器中仍然有效，尽管它们不再被推荐使用。HTML5 允许您在 HTML 和 CSS 之间切换。这是更可取的，因为它允许对页面上每个 HTML 元素的位置进行更精细的控制。
使用 CSS 在网页上定位和设置图像动画。以下是示例代码片段 -
<style>
.image-container {
position: relative;
width: 300px;
height: 300px;
}
.image {
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s ease-in-out;
}
.image:hover {
transform: translateX(50%);
}
</style>
<div class="image-container">
<img class="image" src="https://www.cainiaomax.com/html/images/html-mini-logo.jpg" alt="Your Image">
通过更改样式属性中的边距值，可以重新定位图像。要上下左右移动图像，您应该添加 CSS 属性 margin-left、margin-right、top 和 bottom。您还可以使用左浮动或右浮动。虽然 marquee HTML 标签可能有效，但不建议使用。此代码为您的图像创建一个固定大小的容器 div，并将图像绝对定位在容器内。鼠标悬停时，图像将水平移动其自身宽度的 50%，产生向侧面滑动的效果。
HTML 图像标签
您的 HTML 图像标签应始终包含图像源 URL 和 alt 标签，以便在浏览器无法加载图像时对其进行描述。其余所有内容均为演示样式信息。CSS 用于 HTML5 中的样式。CSS 可以在 style HTML 标签内或块级别内内联使用。<style>是 style 标签。
HTML 中用于移动图片的属性列表 -
左浮动
右浮动
上边距
下边距
左边距
右边距
要使用 HTML 组件上的 CSS 属性移动图片，在以内联方式设置样式时，style 标签始终添加到图片源之后。
<img src="https://example.com/image1.png" style="float: right;">
将图片浮动到任意 HTML 元素的右侧
<img src = "https://example.com/image1.png" style = "float : right ;"
图片居中技巧
通过将图片源代码与 center 样式元素括起来，您可以将图片居中。之前使用的是 centre 标签，但后来已被 CSS 样式属性 text-align: centre 取代。要使用此功能，首先在段落元素内插入 HTML 图像标签，然后插入带有 text-align center 属性的 style 标签。
<p style="text-align: center;"><img src="https://www.cainiaomax.com/html/images/html-mini-logo.jpg2"></p>
向下移动图像
要在 HTML 中缩小照片尺寸，请在图像源位置后添加 style 属性。这样，您就可以在 HTML 中设置和修改 margin-top 属性，从而将图片向下移动。
<img src="https://www.cainiaomax.com/html/images/html-mini-logo.jpg"style="margin-top: 100px;">
左右移动图片
使用 HTML 中的 margin-right 属性可以使图片左对齐。边距指的是空白区域，请记住这一点。它通过增加右边距将 HTML 元素向左移动。
<img src="https://www.cainiaomax.com/html/images/html-mini-logo.jpg"style="margin-left: 100px;">
当应用 margin-left 属性时，图像会在屏幕上从左向右移动。使用此属性可以使图像右对齐。
<img src="https://www.cainiaomax.com/html/images/html-mini-logo.jpg"style="margin-left: 100px;">
将图片向上移动
要管理 HTML 元素后面的区域，请使用 margin-bottom 属性。
<img src="https://www.cainiaomax.com/html/images/html-mini-logo.jpg"style="margin-bottom: 100px;">
使用 HTML 样式元素中的块级 CSS 移动所有图片
将类名放在图片 URL 或文件位置的前面，即可访问已为图片 CSS 类定义的样式。样式标签之间设置的值将由此调用。使用图片 HTML 标签中的样式属性是一种简单的方法，可以将单张图片移动到您想要的位置。在样式元素中设置一次，然后调用图像类更改位置即可重复相同的定位，而无需重复应用样式属性。
<img class="image" src="https://www.cainiaomax.com/html/images/html-mini-logo.jpg">
使用 JavaScript
JavaScript 可用于更改照片的行为和定位。以下是一些代码示例 -
<style>
.image-container {
position: relative;
width: 300px;
height: 300px;
}
.image {
position: absolute;
top: 0;
left: 0;
}
</style>
<div class="image-container">
<img class="image" src="https://www.cainiaomax.com/html/images/html-mini-logo.jpg" alt="Your Image">
</div>
<script>
var image = document.querySelector('.image');
var container = document.querySelector('.image-container');
container.addEventListener('mousemove', function(event) {
var x = event.clientX - container.offsetLeft;
var y = event.clientY - container.offsetTop;
image.style.transform = 'translate(' + x + 'px,' + y + 'px)';
});
</script>
此代码监听鼠标在容器 div 内的移动，并根据鼠标相对于容器的位置更新图像的位置。这实现了图像跟随鼠标光标移动的效果。
结论
我们研究了在 HTML 中移动图像的各种方法，从使用 JavaScript 到 CSS、HTML 标签等。然而，还有更多方法有待探索。本文中使用的方法是实现我们期望结果的最重要、最实用且最简洁的方法。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
