Question

当您访问此链接时 http://tweetboard.com/alpha/

您将在左侧看到推文标签。当您单击此推文标签时，另一个网站会加载到此面板/ iframe中。能帮我理解这个功能是如何创建的吗？看来我应该能够使用标准HTML和jQuery创建这种效果。

如果你能指出正确的资源来生成这种用户界面，那就太棒了。

提前致谢。

Answer 1

你必须做几件事：

将外部网站加载到div中，该div可能完全位于页面之外。（注意：您必须通过代理传递外部站点，因为$（）。load是AJAX）

$（ “＃sliderpanel”）负载（ “/ getpagescript Q = http://www.google.com？”）;

点击您的识别按钮动画。

   $("#slider").click(function () {
           $(this).show("slide", { direction: "right" }, 1000);
     });

/* see: http://docs.jquery.com/UI/Effects/Slide */

3。连接'切换'以关闭面板，这可以通过用以下代码替换上面的代码来完成：

$("#slider").click(function () {
  if($(this).is(":hidden")) {
      $(this).show("slide", { direction: "right" }, 1000);
   } else {
      $(this).hide("slide", { direction: "left" }, 1000);
   }
});

您可以使用iframe，但据我所知，当页面在iframe中完全加载时，无法执行回调。如果你正在尝试编写一个执行此操作的插件，那么替换设置iframe内容的第一步就是最佳选择。

编辑：抱歉，如果任何代码块搞砸了，那么根据空格或使用编辑器中的“代码”按钮，不会格式化。

tweetboard效果滑动框架

1 个答案: