数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在HTML中移动图片？
可以使用HTML的img标签将图片包含在网页中。
<img>标签没有结束标签，是空的，只包含属性。
网页可以使用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>标签的属性
Direction：控制图片滚动的方向。此属性的值可以是left、right、up或down。
Behavior：此属性描述文本的滚动行为。它可以是alternate、scroll或slide等值。
语法
<marquee> <img src=""> </marquee>
示例1
<!DOCTYPE html>
<html>
<body>
<center>
<!-- The image has scrolling behavior to left -->
<marquee behavior="scroll" direction="left">
<img src="https://tutorialspoint.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://tutorialspoint.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://tutorialspoint.com/html/images/html-mini-logo.jpg" alt="Image 1">
</marquee>
<marquee behavior="alternate" direction="right">
<img src= "https://tutorialspoint.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://tutorialspoint.com/html/images/html-mini-logo.jpg" alt="Your Image">
通过更改样式属性中的margin值，可以重新定位图片。要向上、下、左或右移动图片，应添加CSS属性margin-left、margin-right、top和bottom。您还可以使用左浮动或右浮动。虽然它可能有效，但不建议使用marquee HTML标签。此代码为您的图片创建一个具有固定大小的容器div，并在容器内绝对定位图片。悬停时，图片将水平移动其自身宽度的一半，从而产生向侧面滑动的效果。
HTML图片标签
您的HTML图片标签应始终包含图片源URL和alt标签，以在浏览器无法加载图片时描述图片。其他所有内容都是演示样式信息。在HTML5中使用CSS进行样式设置。CSS可以在style HTML标签内内联使用，也可以在块级使用。<style>是样式标签。
在HTML中移动图片的属性列表：
左浮动 (Float left)
右浮动 (Float right)
上边距 (Margin-top)
下边距 (Margin-bottom)
左边距 (Margin-left)
右边距 (Margin-right)
要在HTML组件上使用CSS属性移动图片，在内联样式时，样式标签始终添加到图片源之后。
<img src="https://example.com/image1.png" style="float: right;">
将图片浮动到任何HTML元素的右侧
<img src = "https://example.com/image1.png" style = “float : right ;”
图片居中技术
通过将图片源代码用center样式元素括起来，可以居中图片。以前使用center标签，但现在已被text-align: center CSS样式属性取代。要使用它，首先将HTML图片标签插入段落元素中，然后使用text-align: center属性添加样式标签。
<p style="text-align: center;"><img src="https://tutorialspoint.com/html/images/html-mini-logo.jpg2"></p>
向下移动图片
要在HTML中缩小图片，请在图片源位置之后添加style属性。这样，您可以设置和修改HTML中的margin-top属性以向下移动图片。
<img src="https://tutorialspoint.com/html/images/html-mini-logo.jpg"style="margin-top: 100px;">
左右移动图片
在HTML中使用margin-right属性左对齐图片位置。记住，margin是空白空间。它通过增加右边距将HTML元素向左移动。
<img src="https://tutorialspoint.com/html/images/html-mini-logo.jpg"style="margin-left: 100px;">
当对图片应用margin-left属性时，图片将在屏幕上从左向右移动。使用它右对齐图片。
<img src="https://tutorialspoint.com/html/images/html-mini-logo.jpg"style="margin-left: 100px;">
向上移动图片
要管理HTML元素后面的区域，请使用margin-bottom属性。
<img src="https://tutorialspoint.com/html/images/html-mini-logo.jpg"style="margin-bottom: 100px;">
HTML样式元素中的块级CSS用于移动所有图片
在图片URL或文件位置的源之前放置类名，以访问已为图片CSS类定义的样式。样式标签之间设置的值将被调用。使用图片HTML标签中找到的style属性是一种简单的方法，可以将图片移动到所需位置，一次设置一个图片。在style元素中设置一次，然后调用图片类来更改位置，以便重复相同的定位，而无需重复应用style属性。
<img class="image" src="https://tutorialspoint.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://tutorialspoint.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标签等。然而，仍然存在更多有待探索的方法。本文中使用的方法是最重要和最有用的，也是实现预期结果的简短方法。
16K+ 次浏览
