動態添加帶有動畫的gif圖像
[英]Add dynamically a gif image with animation
問題描述
我正在嘗試以編程方式加載擴展名為.gif的img 。 但是動畫只發生一次。
我如何添加更多的img並且每次添加新的img都看到動畫，而不僅僅是最終狀態？
注意：我不想循環gif 。 我只想讓下一個img表現得像第一個一樣，先設置動畫然后停止。
var topval = 10; var right = 10; var addStar = function() { var img = $('<img id="'+topval+'">'); img.attr('src','https://s3-sa-east-1.amazonaws.com/musicamise/astronautAnimatedGif.gif'); img.attr('alt','alt'+topval); img.css('position','absolute'); img.css('right', right+'px'); img.css('top', topval+'px'); img.appendTo('body'); topval = topval+10; right = right+10; }; $("#addStar").click(addStar);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body style="margin:0;padding:0;"> <button id="addStar">Click do add</button> </body>
提前致謝。
3 個解決方案
解決方案1
1 2015-10-13 20:08:23
您可以通過將隨機查詢字符串參數附加到URL來解決此問題。 這會欺騙瀏覽器以使圖像每次都不同。 例如：
https://s3-sa-east-1.amazonaws.com/musicamise/astronautAnimatedGif.gif?x=' + Math.random()
var topval = 10; var right = 10; var addStar = function(){ var img = $('<img id="'+topval+'">'); img.attr('src','https://s3-sa-east-1.amazonaws.com/musicamise/astronautAnimatedGif.gif?x=' + Math.random()); img.attr('alt','alt'+topval); img.css('position','absolute'); img.css('right', right+'px'); img.css('top', topval+'px'); img.appendTo('body'); topval = topval+10; right = right+10; } $("#addStar").click(addStar);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body style="margin:0;padding:0;"> <button id="addStar">Click do add</button> </body> Thanks in advance.
解決方案2
1 已采納 2015-10-13 20:08:31
您的問題是因為瀏覽器采用了相同的緩存圖像。 當您更改圖像的URL時，就好像您在尋找另一張圖像。 缺點是他總是對圖像提出新的要求。
var topval = 10; var right = 10; var count = 0; var addStar = function(){ var img = $('<img id="'+topval+'">'); img.attr('src','https://s3-sa-east-1.amazonaws.com/musicamise/astronautAnimatedGif.gif?count='+count++ ); img.attr('alt','alt'+topval); img.css('position','absolute'); img.css('right', right+'px'); img.css('top', topval+'px'); img.appendTo('body'); topval = topval+10; right = right+10; } $("#addStar").click(addStar);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body style="margin:0;padding:0;"> <button id="addStar">Click do add</button> </body>
解決方案3
0 2015-10-13 20:00:59
- 創建一個div
將您的gif設置為 div 的背景圖片 ：
$('myDiv').css('background-image', 'url(' + imageUrl + ')');
使用JavaScript的GIF圖像位置動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.