Question

我希望当我调用页面2然后这会产生滑块效果并显示div。添加200％的宽度或其他东西。但我需要一些帮助。有人能帮助我吗？

<html>

<head>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>

        body {
            overflow: hidden; <!-- quitar scroll -->
        }

        .page {
            position: absolute;
            padding: 12px;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .page.left {
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
        }

        .page.center {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        .page.right {
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
        }

        .page.transition {
            -webkit-transition-duration: .25s;
            transition-duration: .25s;
        }

    </style>

</head>
<body>

    <!-- PAG 1 -->
    <div id="homePage" class="page transition center" style="background-color: #5AAED5">
        <h1>Home Page</h1>
        <a href="javascript:slidePageFrom(page1, 'right');">Page 1</a><br/a>
        <a href="javascript:slidePageFrom(page1, 'right');">Page 2</a>
    </div>

    <!-- PAG 2 -->
    <div id="p1" class="page transition right" style="background-color: #8ca83d">
        <h1>Page 1</h1>
        <a href="javascript:slidePageFrom(homePage, 'left');">Back</a>
    </div>

    <script>

        var homePage = document.getElementById("homePage");
        var page1 = document.getElementById("p1");

        var currentPage = homePage;

        function slidePageFrom(page, from) {
            // Position the page at the starting position of the animation
            page.className = "page " + from;

            // Position the new page and the current page at the ending position of their animation with a transition class indicating the duration of the animation
            page.className ="page transition center";
            currentPage.className = "page transition " + (from === "left" ? "right" : "left");
            currentPage = page;
        }

    </script>


</body>
</html>

提前致谢

Answer 1

添加行：

var page2 = document.getElementById("p2");

此版本的代码更好：http://jsfiddle.net/juxzg6fn/1/ 祝你好运！

Answer 2

您使用<a href="javascript:slidePageFrom(page2, 'right');">Page 2</a>调用page2。您将page2声明为变量，但未声明它。

您可以通过在JS代码中添加此行来修复它。

var page2 = document.getElementById("p2");

但是，对于您添加的每个新页面，您都需要声明一个变量。如果您使用id页面（已经使用过的页面）将其设置为动态，则会更容易。

您可以将HTML更改为（请注意p1，p2和homePage周围的锚点中的单引号：

<!-- PAG 1 -->
<div id="homePage" class="page transition center" style="background-color: #5AAED5">
    <h1>Home Page</h1>
    <a href="javascript:slidePageFrom('p1', 'right');">Page 1</a><br/>
    <a href="javascript:slidePageFrom('p2', 'right');">Page 2</a>
</div>
<!-- PAG 2 -->
<div id="p1" class="page transition right" style="background-color: #8ca83d">
    <h1>Page 1</h1>
    <a href="javascript:slidePageFrom('homePage', 'left');">Back</a>
</div>
<!-- PAG 2 -->
<div id="p2" class="page transition right" style="background-color: #8ca83d">
    <h1>Page 2</h1>
    <a href="javascript:slidePageFrom('homePage', 'left');">Back</a>
</div>

并使用相应的JS代码：

var currentPage = document.getElementById('homePage');

function slidePageFrom(page, from) {
    // Position the page at the starting position of the animation
    var page = document.getElementById(page);
    page.className = "page " + from;

    // Position the new page and the current page at the ending position of their animation with a transition class indicating the duration of the animation
    page.className = "page transition center";
    currentPage.className = "page transition " + (from === "left" ? "right" : "left");
    currentPage = page;
}

您可以找到working demo here。

尝试使用css和js执行多个页面滑块

2 个答案: