Question

我是网络开发的新手，我喜欢它。

但我遇到了一个问题，我无法弄明白。当我失去对浏览器选项卡的关注时，我的淡入淡出效果会在我们的图像发生变化时进行多次打开。

另一个问题，当我调整浏览器大小时，我真的希望我的div元素中的图像像：http://jsfiddle.net/eb51hxj1/。

 <div class="divImage">
    <img id="image"> </div>
 <div>

我的代码是：

https://jsfiddle.net/a2bsarfb/

Answer 1

创建一个检查窗口焦点的新var。当窗口焦点消失时，只需跳过剩下的代码。

在最顶部添加一个新的var：

var lostFocus = false;

在来电者功能中添加：

if(lostFocus){ return false; }

所以它看起来像：

function Caller() {
  var imag = ["https://i.ytimg.com/vi/tq0H6nQMdNk/maxresdefault.jpg", "https://i.ytimg.com/vi/4qVMnkF7W60/maxresdefault.jpg", "https://s-media-cache-ak0.pinimg.com/originals/52/1d/e6/521de6a52e774664745132156448f43b.jpg"];
  var numarImagini = imag.length - 1;
  var i = Math.floor((Math.random() * imag.length));
  Rotate(imag[i], i);
  i++;
  setInterval(function() {
    if(lostFocus){ return false; }
    if (i > imag.length - 1) {
      i = 0;
      Rotate(imag[i], i);
      i++;
    } else {
      Rotate(imag[i], i);
      i++;
    }
  }, 2000)
}

在底部添加事件监听器：

window.onblur = function() { lostFocus = true; };
window.onfocus = function() { lostFocus = false; };

淡化效果刷新失去焦点多次

1 个答案: