Question

我想尽可能使用javascript将图片（小星星）添加到现有的动画GIF中。可能只有0星，可能大约10星，但这个数字直到gif加载到页面上才知道。如果明星们花了很多钱，它就会成为一个奖励。在图像周围。

粗略搜索SO和谷歌的搜索结果并不多。我想知道我是不是在使用正确的条款进行搜索。

有人能指出我正确的方向或给我一个类似的例子吗？

Answer 1

所以...这样的事情？

http://jsfiddle.net/CaseyRule/e0a98pdu/3/

var w = $('#gifContainer').width() - 12;
var h = $('#gifContainer').height() - 12;
var stars = [];

function randomlyPositionStar( star ) {
    var x = (Math.random() * w);
    var y = (Math.random() * h);
    star.style.transform =  'translate('+x+'px,'+y+'px)';
}

for(var i = 0; i<10; i++ ){
    var starSrc = 'http://upload.wikimedia.org/wikipedia/en/archive/6/60/20060130131745!LinkFA-star.png';
    var star = new Image();
    star.src = starSrc;
    star.className = 'star';
    randomlyPositionStar( star );
    $('#gifContainer').append(star);
    stars.push( star );
}

setInterval( function() {
    var i = Math.floor(Math.random() * stars.length);
    randomlyPositionStar( stars[i] );
}, 100);

使用javascript将图像添加到动画gif

1 个答案: