如何在Javascript中滑动到另一个html页面？

Question

我正在尝试制作一个网页来为比赛计时，我想制作一个 html 页面，其中的计时器通过点击按钮从右侧滑动

这里是主菜单的html：

<!DOCTYPE HTML>

<body style="background:#f2f2f2;">

<div id="options" style="background:#0c0c0c; float:right;">
    <div class="menu" onclick="openChronometre()" ></div>
</div>

</body>

here's a js fiddle of the main menu (without images)

here's a js fiddle of the timer (the layout isn't that great, still WIP)

点击主菜单中的黑条时，整个页面 html 定时器页面应该从右边出现，有什么办法可以做到吗？

Answer 1

抱歉我没有做动画部分。但作为一个基本想法...

您最好将计时器保留为主菜单页面上的 div。如果它必须是另一个页面，然后使用 iframe 或 ajax 将内容加载到我猜的 div。

无论哪种方式，它都应该包含在您单击的元素中。然后你可以使用一些JavaScript修改CSS并在页面上显示it/slide。例如，jQuery 库有很多 animation/slide 函数。

我基本上将你的 2 个小提琴合二为一并添加了： #options {position: absolute; left: 90%; } 和 onclick="opts = document.getElementById('options'); if (opts.style.left == '0px') { opts.style.left = '90%'; } else { opts.style.left = '0px';}"

html {
  overflow: hidden;
}
body {
  font-family: 'Century Gothic';
  font-size: 34px;
}
#options {
  box-shadow: 0 0 5px 1px;
  margin-top: 100px;
  margin-right: -8px;
  height: 450px;
  cursor: pointer;
  position: absolute;
  left: 90%;
}
#Chrono1,
#Chrono2 {
  overflow: hidden;
  background-color: #2d2d2d;
  box-shadow: 0 0 4px 0 #0c0c0c;
  padding: 6px 20px;
}
#Panel1,
#Panel2 {
  overflow: hidden;
  background-color: #2d2d2d;
  box-shadow: 0 0 4px 0 #0c0c0c;
  width: 400px;
  height: 450px;
}
#Panel1:hover,
#Panel2:hover {
  transition: opacity 0.5s;
  -webkit-animation: PanelSlide 2s;
  /* Chrome, Safari, Opera */
  animation: PanelSlide 2s;
  /* IE */
}

<body style="background:#f2f2f2;">

  <div id="options" style="background-color: #262626; font-family: Century Gothic; color: #8c8c8c;" onclick="opts = document.getElementById('options');
    if (opts.style.left == '0px') {
        opts.style.left = '90%';
    } else {
        opts.style.left = '0px';
    }
">
    <div id="Title" style="font-size: 55px; text-align: center; margin-top: 3%">Timer</div>

    <div id="Temps" style="text-align: center; font-size: 30px; margin: 7%;">
      <div id="Chrono1" style="display: inline-block; margin-right: 540px; position:relative;">
        00:00:00
      </div>

      <div id="Chrono2" style="display: inline-block; position:relative;">
        00:00:00
      </div>
    </div>

    <div id="Panels" style="text-align: center; font-size: 30px; margin-top: -5%;">
      <div id="Panel1" style="display: inline-block; position:relative; margin-right: 300px; opacity: 0;">

      </div>

      <div id="Panel2" style="display: inline-block; position:relative; opacity: 0;">

      </div>
    </div>
  </div>

</body>

Answer 2

只需在可见性之外的 div 中拥有（或加载）计时器页面，然后使用动画将其滑入：

#next_page {
    position:fixed;
    top:0px;
    left:100%;
    z-index:222;
    height:100%;
    width:100%;
    background:rgba(0,0,0,0.6);
}

然后用JS（为了方便我用了jQuery）：

function openChronometre(){
    $("#next_page").stop(0,0).animate(
        { left: 0 },
        1000
    );
}

您可以在此处看到它的工作原理：http://jsfiddle.net/1uggfw32/5/（我将选项设置为绿色框，以便您可以单击它们）。

如何在Javascript中滑动到另一个html页面？

How to slide to another html page in Javascript?

html

javascript

slide