0

我正在尝试从外部 .js 文件动态放置动画 PNG。首先，我找到了一个简单的动画 png 解决方案，它可以在将代码放在<script>标签中的任何位置绘制动画，但现在看起来我不知道如何从外部文件正确调用该函数。

该脚本来自AnimatedPNG，它看起来像这样：

<script type="text/javascript" src="animatedpng.js"></script>
<div id="pnganim" align="center">
    <script>
        fishAnim = new AnimatedPNG('fish', 't01.png', 3, 100);
        fishAnim.draw(false);
    </script>
</div>

现在，我正在尝试从 external.js 文件和 jQuery 调用它：

function addFish(){
    $('#pnganim').html('<script type="text/javascript" src="animatedpng.js" />');
    fishAnim = new AnimatedPNG('fish', 'fish01.png', 3, 100);
    myFish = fishAnim.draw(false);
    $('#pnganim').append(myFish);
}

......它不工作。单击调用 addFish 函数的按钮后，它仅打开空白页面上的第一帧。

我在这里做错了什么？

谢谢

4

2 回答 2

0

  1. 我不知道你为什么使用 $('#pnganim').html('<script ... />);.

    只需将其<script type="text/javascript" src="animatedpng.js"></script>放在您的<head>.

  2. $('#pnganim').append(myFish);没有任何意义。该draw函数不返回可以附加到的 html 元素#pnganim

相反，您的代码可能应该如下所示

function addFish(){
    $('#pnganim').html('<script type="text/javascript">var fishAnim = new AnimatedPNG("fish", "fish01.png", 3, 100);fishAnim.draw(false);</script>');
}
于 2010-03-21T11:15:41.553 回答
0

当您执行新的 ANimatedPNG 操作时，您的 js 脚本可能不会加载。尝试检查控制台是否有错误说明 AnimatedNG 未定义。您可以通过使用 jQuery 的 AJAX 脚本加载来解决此问题：

$.getScript('animatedpng.js', function(){
   fishAnim = new AnimatedPNG('fish', 'fish01.png', 3, 100);
   myFish = fishAnim.draw(false);
   $('#pnganim').append(myFish); //this line looks fishy too (chuckle)
});
于 2010-03-21T11:15:46.103 回答