1. 首頁 > 生活百科 > >

html如何將圖片右移

小知識

若何在html網頁中將圖片右移？在回覆這個問題前 ， 需要先弄清晰右移的體例：右移動畫仍是右移一次 ， 仍是可控的右移？下面小編就針對三種環境做簡單的介紹！
方式/
1【html如何將圖片右移】起首 ， 我們籌辦一個簡單的網頁用于測試利用 。 在記事本中輸入以下代碼：
<html>
     <img src=https://vvvtt.com/article/"1.jpg" width="120" height="180" />
     <br />
    <img src=https://vvvtt.com/article/"1.jpg" width="120" height="180" />
</html>
這代碼并不規范 ， 僅用于演示 ， 現實過程中請自行完美 。
然后依次點擊“文件”——"保留" ， 保留文件名為：index.html ， 保留類型為所有文件 。

html如何將圖片右移



html如何將圖片右移



2雙擊打開保留的index.html文件 ， 瀏覽器中的結果如圖所示：

html如何將圖片右移



31.操縱marquee標簽右移
針對第一種環境 ， 我們可以操縱marquee標簽來實現圖片輪回右移 。
點竄第一個圖像的代碼：
<marquee direction="right">  
       <img src=https://vvvtt.com/article/"1.jpg" width="120" height="180" />
</marquee>

html如何將圖片右移



4保留后 ， 在瀏覽器中打開 ， 運行結果如下：

html如何將圖片右移



52.操縱CSS樣式右移
針對第二種環境 ， 可以操縱css樣式來讓圖片在本來位置的根本上標的目的右偏移給定值距離 。
點竄第一張圖片代碼如下：
<img src=https://vvvtt.com/article/"1.jpg" width="120" height="180" style="position:relative;left:10px;" />
style="position:relative;left:10px;" 暗示圖像在原有位置的根本上標的目的右移動10PX 。

html如何將圖片右移



6保留點竄后 ， 在瀏覽器打開 ， 運行結果如下：

html如何將圖片右移



73.操縱js+CSS樣式實現可控右移
道理同CSS樣式一樣 ， 只是可用JS來節制右移的距離 。
點竄代碼如下：
<html>
<script language="javascript">
   var mx=10;
   function MoveRight()
   {
     mx+=10;
     document.getElementById("img1").style.left=mx+"px";
   }
</script>
<img id="img1" src=https://vvvtt.com/article/"1.jpg" width="120" height="180" style="position:relative;"/>
<br />
<img src=https://vvvtt.com/article/"1.jpg" width="120" height="180" />
<input type="button" value=https://vvvtt.com/article/"右移10PX" onclick="MoveRight()"/>

猜你喜歡