时间戳

首页 > 解决方案 > 使图像沿 div 中的 x 轴随机生成 (CSS/Javascript/JQuery)

javascript - 使图像沿 div 中的 x 轴随机生成 (CSS/Javascript/JQuery)

问题描述

我有 css 详细说明我想要图片做什么（我希望它在创建时基本上掉下来）

.pimg{
            width: 100px;
            height: 100px;
            position: absolute;
            animation-name: fall;
            animation-duration: 4s;
            animation-delay: 0s;
            animation-iteration-count: infinite;
        }
        @keyframes fall {
            0%   {top:0px; transform: rotate(0deg)}
            100% {top:800px; transform: rotate(360deg)}
        }

我也有创建图像的 javascript/jquery

function PIMG()
{
    var img = $('<img id="img">');
    img.attr('src', "Doggos/puppy.png");
    img.attr('class', 'pimg');
    img.appendTo('#PIC');
}

我想知道如何制作它，以便它获取 div 内的所有 x 值点，然后沿着该值在该 div 内随机生成图片？如果可能的话，我希望它出现在 css 中，但我不知道这是否可能。

改写：现在我的图像只是在同一个地方创建的。我想知道如何使它在左右轴上的随机位置，但仍然在特定的 div 内。

谢谢你。

标签： javascriptjquerycss

解决方案

JS 小提琴演示：https ://jsfiddle.net/a7rk9vx4/1/

想法是将 的leftcss 属性随机设置img为 0 到框宽度之间的随机数。

推荐阅读