Question

我正在尝试实现与此类似的东西（http://www.radimpesko.com/fonts/larish-alte），其中图像（鸟类）在html页面上随机出现，你必须等待“鸟”开始填充页面之前。关于如何做到这一点的任何想法？

我读过它可能需要在网格上映射对象。所以任何帮助都表示赞赏。感谢。

Answer 1

这样的事情可能会起作用

var Bird = function() {

    var image = "/image/to/bird.png";

    var position = {
        top : Math.floor(Math.random() * 100) + 1),
        left : Math.floor(Math.random() * 100) + 1)
    }

    var width = 20;

    var height = 20;


    var make = function() {   
       return '<div style="top:' + top + '%;left:' + left + '%;position:absolute;background-image:url(' + image + ');width:' + width + 'px;height:' + height + 'px;"></div>';
    }


    return make();
}


(function makeBird() {        
    setTimeout(function() {
        var bird = new Bird();
        $('body').append(bird);
        makeBird();
    }, 1000);
});

警告：这是未经测试的，您应该考虑到碰撞并处理它们

在html页面上随机定位出现的div

1 个答案: