1

我对 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”来停止/开始动画会有所帮助？

谢谢你的建议！

4

1 回答 1

0

此代码应该停止动画。至少它会触发onblur你的IFRAME. 你会很容易弄清楚如何重新开始动画。

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

window.onload=function (){
    var ifr=document.getElementById('your_iframe');
    (function (x){x.onblur=function (){clearTimeout(x.contentWindow.animatedEyes);return;}}(ifr));
    return; 
}
于 2012-04-17T09:13:30.460 回答