Question

我还有一个关于jQuery工具的新手问题（http://flowplayer.org/tools/overlay/index.html）。单击图像时会触发叠加，代码在html正文中看起来与此类似。

<img id = "shark" src = "http://static.guim.co.uk/sys-images/Education/Pix/picture
s/2000/11/13/shark.jpg" alt = "click" />

<div id = "overlayFrame">
    <div id = "overlayContent"></div>
</div>

<script type= "text/javascript">
    var clickable = document.getElementById('shark');
    clickable.onmousedown = ImageClick;

    function ImageClick(e)
    {
        console.log("image clicked");
        $("#overlayFrame").overlay
        ({
            mask: 'darkgrey',
            oneInstance: false,

            onBeforeLoad: function()
            {
                var wrap = this.getOverlay().find("#overlayContent");
                wrap.load("overlay.htm");
            },

            load: true
        });
    }
</script>

我希望每次点击图像时都会出现叠加层。现在，每次单击图像时，“图像点击”都会打印到控制台，但叠加层仅在第一次出现时才会出现。如何更改此代码以使叠加每次都发生？

感谢您的帮助！

Answer 1

我没有测试过您的特定代码，但我解决了每次调用overlay（）。load（）以编程方式重复加载的相同问题。我认为这对你有用。见下面的最后一行：

<script type= "text/javascript">
var clickable = document.getElementById('shark');
clickable.onmousedown = ImageClick;

function ImageClick(e)
{
    console.log("image clicked");
    $("#overlayFrame").overlay
    ({
        mask: 'darkgrey',
        oneInstance: false,

        onBeforeLoad: function()
        {
            var wrap = this.getOverlay().find("#overlayContent");
            wrap.load("overlay.htm");
        },

        load: true
    }).load(); // This is the only code I added
}
</script>

以编程方式重复jQuery工具叠加

1 个答案: