页面广告移动图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面广告移动图片</title> <style> html, body { height: 100%; width: 100%; margin: 0; /* 确保没有默认边距 */ } img { width: 50px; height: 50px; position: absolute; /* 设置绝对定位 */ } </style> </head> <body> <img src="http://gzui.net/aimg/CloudBase500.jpg" id="moveImg"> <script type="text/javascript"> var moveImg = document.getElementById("moveImg"); var directX = 1; // X轴方向 var directY = 1; // Y轴方向 var moveImgX = Math.random() * window.innerWidth; // 随机初始位置 var moveImgY = Math.random() * window.innerHeight; function moveImgMove() { moveImgX += directX; moveImgY += directY; moveImg.style.left = moveImgX + "px"; moveImg.style.top = moveImgY + "px"; if (moveImgX + moveImg.offsetWidth >= document.body.clientWidth || moveImgX <= 0) { directX = -directX; } if (moveImgY + moveImg.offsetHeight >= document.body.clientHeight || moveImgY <= 0) { directY = -directY; } requestAnimationFrame(moveImgMove); // 使用requestAnimationFrame调用自身 } requestAnimationFrame(moveImgMove); // 启动动画循环 </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 页面广告移动图片