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

发布于 2024-11-27 22:37:12 字数 1114 浏览 6 评论 0原文

我还有另一个关于 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>

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

原文

I have another newbie question about jQuery tools (http://flowplayer.org/tools/overlay/index.html). I have an overlay being triggered when an image is clicked, with code that looks relatively like this in the html body.

<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>

I want the overlay to come up every time the image is clicked. Right now, 'image clicked' prints to the console every time the image is clicked, but the overlay only happens the first time. How can I alter this code to make the overlay happen every time?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

临走之时 2024-12-04 22:37:12

我还没有测试您的具体代码，但我解决了同样的问题，能够通过每次调用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>

I haven't tested your specific code, but I solved the same problem of being able to programatically repeat the load by calling overlay().load() each time. I think this will work for you. See the last line below:

<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>

回复收藏 0 原文

~没有更多了~