Question

我有一个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内。

谢谢。

Answer 1

JS Fiddle演示：https://jsfiddle.net/a7rk9vx4/1/

我们的想法是将left的{{1}} css属性随机设置为0到框的宽度之间的随机数。

Answer 2

要在div元素内沿x轴随机移动它，可以随意更改边距。只需将此行添加到您的PIMG函数中

img.css("margin-left", Math.random() * 100 + "%");

所以您的函数现在应如下所示：

function PIMG()
{
  var img = $('<img id="img">');
  img.attr('src', "Doggos/puppy.png");
  img.attr('class', 'pimg');
  img.appendTo('#PIC');
  img.css("margin-left", Math.random() * 100 + "%");
}

在div中沿x轴随机生成图像（CSS / Javascript / JQuery）

2 个答案: