Нужны переходы между фреймами с использованием javascript - PullRequest
Новая
       1

Нужны переходы между фреймами с использованием javascript

0 голосов
/ 28 января 2020 
<html>
<head>
<link href="./css/global.css" type="text/css" rel="stylesheet">
</head>

<body>

<iframe id='sequencing' src='' ></iframe>

<script>
var URLs = 
[
"https://www.google.com/",
"https://www.youtube.com/",
"https://letterboxd.com/"
];
var currURL = 0;

function cycle() {
    currURL = (currURL + 1) % URLs.length;
    document.getElementById("sequencing").src = URLs[currURL];
    setTimeout(cycle, 5000);
}

cycle();
</script>

</body>
</html>

Я пытаюсь выяснить, как сделать перекрестное затухание между различными URL-адресами в массиве, которые действуют как фреймы. Я не хочу, чтобы между сайтами был короткий период загрузки, однако я хочу, чтобы они обновлялись при каждом переключении, как я могу добавить плавное перекрестное затухание между источниками?

1 Ответ

0 голосов
/ 28 января 2020

Боюсь, вы не можете сделать это с одним <iframe> элементом. Чтобы иметь перекрестное затухание между двумя URL-адресами, вам нужно два iframe, поэтому, хотя один затухание в предыдущем может исчезнуть.

На самом деле это не так уж сложно - вам просто нужно сгруппировать два iframe в <div> и накладывать их друг на друга. Теперь это так же просто, как переместить активный iframe на передний план - изменив его z-index - постепенно увеличивая и уменьшая второй iframe. Вам просто нужно убедиться, что все это происходит, как только URL успешно загружен в iframe. Выцветание может быть выполнено с помощью анимации css ключевого кадра.

Вот пример: 

var URLs = [
  "https://picsum.photos/id/7/256/160",
  "https://picsum.photos/id/11/128/80",
  "https://picsum.photos/id/76/64/40",
  "https://picsum.photos/id/1/32/20"
];
var currURL = 0;
var activeIFrame = document.getElementById("iFrameA");
var oldIFrame = document.getElementById("iFrameB");
var temp;

function cycle() {
  currURL = (currURL + 1) % URLs.length;
  activeIFrame.src = URLs[currURL];
  activeIFrame.onload = function() {
    activeIFrame.classList.remove("fadeIn");
    activeIFrame.classList.remove("fadeOut");
    activeIFrame.classList.add("fadeIn");
    oldIFrame.classList.remove("fadeIn");
    oldIFrame.classList.remove("fadeOut");
    oldIFrame.classList.add("fadeOut");
    activeIFrame.style.zIndex = "2";
    oldIFrame.style.zIndex = "1";
    temp = activeIFrame;
    activeIFrame = oldIFrame;
    oldIFrame = temp;
    setTimeout(cycle, 5000);
  }
}

cycle();
@keyframes in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#container {
  width: 320px;
  height: 200px;
  position: relative;
}

#iFrameA,
#iFrameB {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.fadeIn {
  animation: in 2s;
}

.fadeOut {
  animation: out 2s;
  animation-fill-mode: forwards;
}
<div id="container">
  <iframe id='iFrameA' src=''></iframe>
  <iframe id='iFrameB' src=''></iframe>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...