12

编辑：见更新！

我有以下html：

<body>
  <span id="milestone1">
  </span>   
  <img id="image1" src="blabla.jpeg" style="width:400px;height:200px;" />
  <div id="divOverlayOverImage1" style="position:absolute; top:100px; left:40px; width:400px;height:200px;" onclick="DoFunkyStuff();"><div>
</body>

起初，它divOverlayOverImage1位于上方Image1，覆盖它，但如果我运行下面的代码，该#divOverlayOverImage1元素将不再覆盖该#image1元素。

$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');

我希望有一个事件#image1在更改其位置时通知我，因此我可以更新#divOverlayOverImage1.

注意：我无法完全控制 dom。该$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');命令由第三方运行。

更新：我没有对 DOM 的完全控制，所以我不能对元素添加函数进行回调，因为不是我进行此调用。另外，我不能像疯了一样修改 HTML。我只是来到一组网站，通过 JavaScript 附加和覆盖到特定的图像，仅此而已。还有其他竞争对手也改变了 HTML。

4

4 回答 4

7

如果您对 DOM 具有完全控制权，并且我假设您拥有，那么您可以对您在 DOM 中所做的每项更改添加一个调用，这些更改会影响<span>.

function yourFunction() {
    $("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
    updateMyOverlayPosition();
}

如果这不起作用，您可以在这里尝试这个：检测 DOM 中的更改

编辑

如果你想要事件：

$('#image').on('adjustOverlay',function(e) {
    // adjust the position of the overlay
}

$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
$('#image').trigger('adjustOverlay', {extra: "info", some: "parameters"});

编辑2

由于您无法完全控制 DOM 中的更改，并且您可能会感到惊讶，您可以使用我上面已经提供的链接，或者检查一个时间间隔，如果覆盖仍然在它需要的位置。这并不能以您想要的方式解决问题，但是 DOM 更改没有本机事件，因此您必须坚持某种解决方法。

var checkTime = 100; //100 ms interval
var check = setInterval(function() {
    // adjust overlay position
}, checkTime);

编辑3

下一个可能的解决方案：如果您知道影响代码是如何插入到 DOM 中的，您可以尝试更改该方法，以便它始终运行您的adjustOverlayPosition()或触发事件，如果您喜欢事件。示例：如果它是用 jQuery 插入的，.after()您可以修改该函数：

jQuery.fn.extend({
    // since the .after() function already exists, this will
    // actually overwrite the original function. Therefore you need
    // the exact code that was originally used to recreate it.
    after: function() {
        return this.domManip( arguments, function( elem ) {
        if ( this.parentNode ) {
            this.parentNode.insertBefore( elem, this.nextSibling );
        }
        // call the function directly
        adjustOverlayPosition();
        // or call an event
        $('#image').trigger('adjustOverlay', {extra: "info", some: "parameters"});
    }
});

缺点：此解决方案可能有风险，并且只有在您知道最初使用的代码时才有效。所以它也取决于 jQuery 版本。

于 2013-08-05T09:39:38.833 回答
3

一种解决方法是重新组织您的布局。将您的图像和叠加层包装到一个 div 中。这样，他们将永远保持这种状态。

<div id="wrap">
    <img id="i1" src="..." />
    <div id="overlay" />
</div>

#wrap {
    position: relative;
    width: 400px;
    height: 200px;
}

#overlay {
    position: absolute;
    top: 100px; 
    left: 40px; 
    width: 400px;
    height: 200px;
}
于 2013-08-05T09:44:03.773 回答
1

如果用 ovelay 包装 img 只是您的要求，我认为您可以使用纯 css 解决方案：

试用演示

HTML

<p id="milestone1">
First Overlay
</p>   
<div class="img-overlay-container" style="width:400px;height:200px;">
 <img id="image1" src="blabla.jpeg"/>
 <div id="overlay1" onclick="alert('clicked');">
 </div>
</div>  
<p id="milestone2">
Second Overlay
</p>       
<div class="img-overlay-container" style="width:100px;height:400px;">
 <img id="image2" src="blabla.jpeg"/>
 <div id="overlay2" onclick="alert('clicked');">
 </div>
</div>

CSS

.img-overlay-container{
  position: relative;
  display:inline-block;
}
.img-overlay-container > img{

}

.img-overlay-container > div{
  position:absolute; 
  top:0px; 
  left:0px; 
  width:100%;
  height:100%; 
  background: rgba(3,3,3,.1);
}
于 2013-08-05T09:44:17.733 回答
-1 
function changePosition(callback) {
  $("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
 callback();
}

然后就可以调用了changePosition(function() {// Add your event handler function})。

希望对你有帮助！

于 2013-08-05T09:44:51.937 回答