色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

html 圖片隨機移動代碼

老白2年前12瀏覽0評論

網頁設計中,圖片的隨機移動效果可以增加頁面的趣味性,提高用戶的體驗感。本文將介紹html代碼如何實現圖片的隨機移動效果。

<style>
img {
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
function move(img) {
var x = Math.floor(Math.random() * (window.innerWidth - img.width));
var y = Math.floor(Math.random() * (window.innerHeight - img.height));
img.style.left = x + "px";
img.style.top = y + "px";
}
window.onload = function() {
var imgs = document.getElementsByTagName("img");
for (var i = 0; i< imgs.length; i++) {
move(imgs[i]);
}
}
setInterval(function() {
var imgs = document.getElementsByTagName("img");
for (var i = 0; i< imgs.length; i++) {
move(imgs[i]);
}
}, 5000);
</script>

首先,在style標簽中定義img的樣式:絕對定位,左上角為(0, 0)。

接下來,在script標簽中定義move函數,功能為把圖片隨機移動到屏幕上的一個位置。利用Math.random()函數生成隨機數,然后設置圖片的left和top屬性實現移動。

在window.onload事件中調用move函數,使所有圖片在頁面加載完成后隨機移動一次。

最后,在setInterval函數中設置每隔5秒鐘圖片隨機移動一次。

這是一段簡單的html代碼,通過它可以實現圖片的隨機移動效果。可以根據實際需要調整移動的時間間隔和移動范圍,以達到最佳效果。