html - 只有一个 Swiffy 转换实例在具有多个转换的页面上有效？

Question

在同一页面上放置多个快速转换似乎是冲突的，只有第一个显示。是否有一个代码区域，可能是实例名称，我可以在每个区域上进行更改，以便多个转换可以出现在同一页面上？

这是我正在谈论的页面的链接：http ://www.ufonies.com/fansmobi.html

标题中的动画效果很好，“太空高尔夫”图像下应该有另一个小动画，但它只是显示为一个空白区域，那里有转换代码。

谢谢

Answer 1

滑块也有这个问题 - 每张幻灯片都是一个快速的动画，每次我使用两个或更多动画时，快速抛出一个错误。我通过使用 iframe 容器代替 div 来解决这个问题 - 这样每个动画都有自己的变量和脚本命名空间。

我希望这有帮助。

Answer 2

其实很简单

swiffyobject 应该重命名为任何 ex。swiffyobject2、swiffyobject3 等等。

在这个例子中，容器被重命名为 container2，元素 id 也是如此，然后我调用 swiffyobject2 而不是 swiffyobject。这样我们就可以使用尽可能多的 swiffyobjects 实例。

<div id="swiffycontainer2" style="width: 190px; height: 195px">
    </div>
    <script>

      var stage = new swiffy.Stage(document.getElementById('swiffycontainer2'),
                                   swiffyobject2);

      stage.start();
    </script>

我喜欢为每个对象创建单独的 js 文件，然后只调用一个实例

<script src="https://www.gstatic.com/swiffy/v5.2/runtime.js"></script>

但这只是个人口味。希望这可以帮助。

Answer 3

尝试创建新实例。

例子：

var swiffyIntroSlide = new swiffy.Stage(document.getElementById('intro-slide'), introSlide);
swiffyIntroSlide.start();

var swiffyBanquePopulaire = new swiffy.Stage(document.getElementById('top-banner'), banquePopulaire);
swiffyBanquePopulaire.start(); 

注意： introSlide 和 banquePopulaire 是 swiffy 对象的变量。