在div中沿x轴随机生成图像(CSS/Javascript/JQuery)
在div中沿x轴随机生成图像(CSS/Javascript/JQuery)
提问于 2019-04-28 08:26:53
我有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内。
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-04-28 08:59:01
要在div elememt内沿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 + "%");
}Stack Overflow用户
发布于 2019-04-28 08:57:32
JS小提琴演示：https://jsfiddle.net/a7rk9vx4/1/
其思想是将img的left css属性随机设置为介于0到框宽度之间的一个随机数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55886008
复制相关文章
相似问题