html如何將圖片右移
若何在html網頁中將圖片右移？在回覆這個問題前，需要先弄清晰右移的體例：右移動畫仍是右移一次，仍是可控的右移？下面小編就針對三種環境做簡單的介紹！
方式/步調
- 1
起首，我們籌辦一個簡單的網頁用于測試利用。在記事本中輸入以下代碼：
<html>
<img src="1.jpg" width="120" height="180" />
<br />
<img src="1.jpg" width="120" height="180" />
</html>
這代碼并不規范，僅用于演示，現實過程中請自行完美。
然后依次點擊“文件”——"保留"，保留文件名為：index.html，保留類型為所有文件。
- 2
雙擊打開保留的index.html文件，瀏覽器中的結果如圖所示：
- 3
1.操縱marquee標簽右移
針對第一種環境，我們可以操縱marquee標簽來實現圖片輪回右移。
點竄第一個圖像的代碼：
<marquee direction="right">
<img src="1.jpg" width="120" height="180" />
</marquee>
- 4
保留后，在瀏覽器中打開，運行結果如下：
- 5
2.操縱CSS樣式右移
針對第二種環境，可以操縱css樣式來讓圖片在本來位置的根本上標的目的右偏移給心猿意馬值距離。
點竄第一張圖片代碼如下：
<img src="1.jpg" width="120" height="180" style="position:relative;left:10px;" />
style="position:relative;left:10px;" 暗示圖像在原有位置的根本上標的目的右移動10PX。
- 6
保留點竄后，在瀏覽器打開，運行結果如下：
- 7
3.操縱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="1.jpg" width="120" height="180" style="position:relative;"/>
<br />
<img src="1.jpg" width="120" height="180" />
<input type="button" value="右移10PX" onclick="MoveRight()"/>
</html>
- 8
保留后，在瀏覽器中打開，每點擊一個按鈕，圖片在當前的位置上右移10PX。
- 發表于 2018-07-19 00:00
- 閱讀 ( 1502 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章