Question

我对iframe中的绝对定位元素有一个小问题。

所以我有一个页面，在页面上我有一个小游戏的iframe。在游戏中是一个男人，这个家伙有绝对定位的学生。学生们正在通过javascript移动。一切都很好，但是如果我打开那个页面，然后继续浏览不同标签中的其他页面，我回来后瞳孔就在以前的其他地方（完全是眼睛）。

有更多的元素绝对位于iframe中，没有一个具有相同的问题，我猜它是因为Javascript动画。有人遇到过类似的问题吗？对不起，但由于种种原因，我不能在这里发布页面。

我可以为小学生动画发布剧本：

function eyes_sides(){
    $('.eyes').animate({
            left:parseInt($('.eyes').css('left'))-9
        },{duration:1500});
    $('.eyes').animate({
            left:parseInt($('.eyes').css('left'))
        },{duration:1000});
}

function eyes_roll(){
    $('.eyes').animate({
        left:parseInt($('.eyes').css('left'))-7,
        top:parseInt($('.eyes').css('top'))-18
      },{duration:1800});
    $('.eyes').animate({
        left:parseInt($('.eyes').css('left')),
        top:parseInt($('.eyes').css('top'))
      },{duration:1300});
    }

function animate_eyes(){
      var animation = random_number(1,2);
      //alert(animation);
      switch(animation){
        case 1:
          eyes_roll();
          break;
        case 2: 
          eyes_sides();
          break;  
      }
      var delay = random_number(4000,12000);          
      window.animateEyes = setTimeout(function(){animate_eyes()},delay);
    }

脚本并不完美，但需要做什么。

我在想什么可能导致问题，也许它在某种程度上连接到该动画运行时标签不活动？也许添加“onBlur”和“onFocus”来停止/开始动画会有帮助吗？

感谢您的建议！

Answer 1

此代码应该停止动画。至少它会在onblur上触发IFRAME。你会很容易理解，如何重新开始动画。

我不熟悉jQuery，但你可以“翻译”代码。

window.onload=function (){
    var ifr=document.getElementById('your_iframe');
    (function (x){x.onblur=function (){clearTimeout(x.contentWindow.animatedEyes);return;}}(ifr));
    return; 
}

iframe和绝对定位元素

1 个答案: