我正在为假期制作一张贺卡,我希望有一些雪花飘落。我不想使用插件来完成此任务。我生成了一些代码,可以在屏幕上随机放置雪花。我正在尝试使用 for 循环一次在屏幕上随机放置最多 20 个薄片。它似乎将 20 个雪花实例放置在同一位置。我希望它是随机的。
//雪花飘落 函数落雪(){
var snowflake = $('<div class="snowflakes"></div>');
$('#snowZone').prepend(snowflake);
snowX = Math.floor(Math.random() * $('#site').width());
snowSpd = Math.floor(Math.random() + 5000);
snowflake.css({'left':snowX+'px'});
snowflake.animate({
top: "500px",
opacity : "0",
}, snowSpd, "easeInCirc", function(){
$(this).remove();
fallingSnow();
});
}
var timer = Math.floor(Math.random() +1000);
window.setInterval(function(){
fallingSnow();
}, timer);
最佳答案
修改元素,而不是所有具有该类的元素。
function fallingSnow() {
var snowflake = $('<div class="snowflakes"></div>');
$('#site').prepend(snowflake);
snowX = Math.floor(Math.random() * $('#site').width());
snowSpd = Math.floor(Math.random() * (500) * 20) + 1000;
snowflake.css({
'left': snowX + 'px'
});
snowflake.animate({
top: "200px", // height of area
opacity: "0",
}, snowSpd, function() {
$(this).remove();
fallingSnow();
});
}
for (var i = 0; i < 100; i++) {
fallingSnow();
}
.snowflakes {
width: 10px;
height: 10px;
background: black;
position: absolute;
top: -40px;
}
#site {
width: 400px;
height: 200px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="site"></div>
关于没有插件的 jQuery 随机失败对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13692303/