在 url 更改时对 iframe 进行动画处理

Animate Iframe on Url Change

本文关键字：动画 处理 iframe url      更新时间：2023-09-26

>我有一个网址旋转器，当有人点击"下一步"按钮时，它会更改网址，使用"上一个"按钮转到上一个网址。我想在URL更改之间添加过渡动画。代码是：

Javascript：

var s = [
  "http://google.com",
  "http://yt.be",
];
var adr,
  i,
  x = 0,
  c = s.length;
function next() {
  x += 1;
  if (x > c - 1) {
    x = 0;
  }
  changeSrc();
}
function prev() {
  x -= 1;
  if (x <= 0) {
    x = c - 1;
  }
  changeSrc();
}
function changeSrc() {
  document.getElementById("fm").src = s[x];
}

HTML：

<form class="navbar-form navbar-right" role="search">
  <input type="button" class="btn btn-success" value="PREV SITE" name="submit" onclick="prev()" />
  <input type="button" class="btn btn-success" value="NEXT SITE" name="submit" onclick="next()" />
</form>
<iframe id="fm" name="fm" style="position:fixed;margin-top:-25px;width:100%;height:95%" frameborder="0"></iframe>

对动画有什么建议吗？如果代码段不起作用，请在此处查看现场演示：YoYoBtcRotator.cf

您可以使用

JQuery UI hide()和show()函数来产生您想要的效果。

看看我拼凑的这个JSFiddle。我使用了divs而不是iframes，但你会得到同样的效果。

编辑

这是将链接附加到所选div 的更新版本，下面是更新 iframe 网址的版本。最后一个网址不起作用，因为网站阻止我重新构建它们，但你放入的任何个人网站都应该完美运行。

相关文章：