Question

真的不知道他们叫什么。出于某种原因，我不记得了。但是你知道在许多主页上他们有类似菜单的东西，面板通过显示他们的产品滑动？我几乎需要学习如何做到这一点，虽然我实际上正在做的是当你点击一些文字时制作一个面板幻灯片。从我所知道的情况来看，这些想法几乎是一样的，除了那些菜单每隔几秒自动完成。

现在我非常清楚如何在Javascript方面做些什么。我现在遇到的问题是（令人担忧的）基本HTML。这就是我所拥有的：

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Dat Sliding Menu Doe</title>
    <link rel="stylesheet" href="slidingmenu.css"/>
</head>
<body>
    <div id="menu1">
        <h1>This is some text.</h1>
        <p>This is some more text.</p>
    </div>

    <div id="menu2">
        <h3>This text is different.</h3>
        <h1>Very different.</h1>
        <p>So different, in fact, that</p>
        <p>the div is a different height.</p>
    </div>

    <script type="text/javascript">

    </script>
</body>
</html>

CSS：

#menu1 {
    position: absolute;
    display: inline-block;
    background: #d8d808;
    color: white;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
    margin-left: 0%;
}

#menu2 {
    position: absolute;
    display: inline-block;
    background: #7feaa8;
    color: white;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
    margin-left: 100%;

}

不要注意颜色或任何东西，这只是练习！

它正在做它应该做的所有事情除了我在页面底部有一个滚动条，允许我向右滚动并看到第二个div ...这是一个问题。我做了一些根本错误的事情，或者我只是需要添加一些东西来摆脱滚动条？

此外，Javascript上的一点点不确定性。我怎样才能得到它，以便两个div的余量保持在同一时间的变化？即使稍有延迟也会出现，对吧？

链接到教程可能更容易。我试着研究这个，但我不知道该怎么查（忘了他们叫什么！）。

修改

好的，所以我采取了约书亚Chavanne的建议，并隐藏了身体的溢出，这是有效的。然后我用Javascript完成了所有这些：

var menu1 = document.getElementById("menu1");
var menu2 = document.getElementById("menu2");
var switch1 = document.getElementById("switch1");
var switch2 = document.getElementById("switch2");

switch1.onclick = move;
switch2.onclick = move;

function move() {
    if (menu1.style.marginLeft == 0) {
        show2();
    }
    else {
        show1();
    }
}

function show2() {
    if (menu1.style.marginLeft > -100) {
        menu1.style.marginLeft = (menu1.style.marginLeft - 10) + "px";
        requestAnimationFrame(show2);
    }
}

当我点击switch1时，menu1移动超过10px，然后停止移动。不知道为什么。

Answer 1

结帐free jssor carousel 它会做你要求的一切，你不必自己写。

如何使用Javascript制作侧滑菜单类型的东西？

1 个答案: