非凡一声 2024-06-09 20:13 采纳率: 0%
浏览 15

关于#html#的问题：如何实现随机位置显示随机图片

如何实现在范围内随机位置显示随机图片，然后缩小直到一定大小后不再改变

  • 写回答

2条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-06-09 20:13
    关注

    引自免费微信小程序：皆我百晓生

    要实现在HTML页面上随机位置显示随机图片，并且在加载后图片会逐渐缩小至特定尺寸后停止，可以采用以下步骤：

    1. 准备图片资源：确保你有多个图片文件，将它们放置在你的项目目录中。

    2. 编写HTML结构：创建一个<div>元素用于包含图片，这个<div>将被用来控制图片的位置和缩放效果。

    3. 使用CSS设置样式：定义<div>和<img>的样式，包括初始位置、尺寸和过渡动画。

    4. 编写JavaScript逻辑：利用JavaScript来处理图片的选择、定位以及动画效果。

    步骤详解及代码实现

    1. HTML结构

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Image Display</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="imageContainer">
        <img id="randomImage" src="" alt="Random Image">
    </div>

    <script src="script.js"></script>
</body>
</html>

    2. CSS样式

    /* styles.css */
#imageContainer {
    position: relative;
    width: 100%;
    height: 100vh;
}

#randomImage {
    position: absolute;
    transition: transform 2s ease-in-out;
}

    3. JavaScript逻辑

    // script.js
document.addEventListener('DOMContentLoaded', function() {
    const imageContainer = document.getElementById('imageContainer');
    const randomImage = document.getElementById('randomImage');

    // 图片数组
    const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

    // 随机选择图片
    const randomImageSrc = images[Math.floor(Math.random() * images.length)];
    randomImage.src = randomImageSrc;

    // 随机位置
    const maxLeft = window.innerWidth - randomImage.width;
    const maxTop = window.innerHeight - randomImage.height;
    const leftPos = Math.floor(Math.random() * maxLeft);
    const topPos = Math.floor(Math.random() * maxTop);
    randomImage.style.left = leftPos + 'px';
    randomImage.style.top = topPos + 'px';

    // 缩小图片到指定大小
    const targetSize = 100; // 目标宽度和高度
    setTimeout(() => {
        randomImage.style.transform = `scale(${targetSize / randomImage.width})`;
    }, 2000); // 2秒后执行
});

    解释：

    • HTML：创建了包含图片的<div>。
    • CSS：设置了<div>为相对定位，图片为绝对定位并添加了过渡动画。
    • JavaScript：
      • 监听文档加载完成事件。
      • 随机选择图片源并应用到<img>标签。
      • 计算随机位置并应用到图片。
      • 使用setTimeout函数在2秒后缩小图片到目标尺寸。

    这样，当页面加载时，将在随机位置显示一张随机图片，并在2秒后平滑地缩小至指定大小。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 6月9日

悬赏问题

  • ¥66 换电脑后应用程序报错
  • ¥50 array数据同步问题
  • ¥15 pic16F877a单片机的外部触发中断程序仿真失效
  • ¥15 Matlab插值拟合差分微分规划图论
  • ¥15 keil5 target not created
  • ¥15 C/C++数据与算法请教
  • ¥15 怎么找志同道合的伙伴
  • ¥20 如何让程序ab.eXe自已删除干净硬盘里的本文件自己的ab.eXe文件
  • ¥50 爬虫预算充足，跪巨佬
  • ¥15 滑块验证码拖动问题悬赏