資料結構
網路
關係資料庫管理系統 (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.tw/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.tw/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.tw/html/images/html-mini-logo.jpg" alt="Image 1">
</marquee>
<marquee behavior="alternate" direction="right">
<img src= "https://tutorialspoint.tw/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.tw/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.tw/html/images/html-mini-logo.jpg2"></p>
向下移動圖片
要在HTML中縮小圖片，請在圖片源位置之後新增style屬性。這樣，您可以設定和修改HTML中的margin-top屬性以向下移動圖片。
<img src="https://tutorialspoint.tw/html/images/html-mini-logo.jpg"style="margin-top: 100px;">
左右移動圖片
在HTML中使用margin-right屬性左對齊圖片位置。記住，margin是空白空間。它透過增加右邊距將HTML元素向左移動。
<img src="https://tutorialspoint.tw/html/images/html-mini-logo.jpg"style="margin-left: 100px;">
當對圖片應用margin-left屬性時，圖片將在螢幕上從左向右移動。使用它右對齊圖片。
<img src="https://tutorialspoint.tw/html/images/html-mini-logo.jpg"style="margin-left: 100px;">
向上移動圖片
要管理HTML元素後面的區域，請使用margin-bottom屬性。
<img src="https://tutorialspoint.tw/html/images/html-mini-logo.jpg"style="margin-bottom: 100px;">
HTML樣式元素中的塊級CSS用於移動所有圖片
在圖片URL或檔案位置的源之前放置類名，以訪問已為圖片CSS類定義的樣式。樣式標籤之間設定的值將被呼叫。使用圖片HTML標籤中找到的style屬性是一種簡單的方法，可以將圖片移動到所需位置，一次設定一個圖片。在style元素中設定一次，然後呼叫圖片類來更改位置，以便重複相同的定位，而無需重複應用style屬性。
<img class="image" src="https://tutorialspoint.tw/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.tw/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+ 次瀏覽
