網頁設計中,圖片的隨機移動效果可以增加頁面的趣味性,提高用戶的體驗感。本文將介紹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代碼,通過它可以實現圖片的隨機移動效果。可以根據實際需要調整移動的時間間隔和移動范圍,以達到最佳效果。