javascript - 如何使用 jQuery 左右滚动 2 个 div(页面)？

Question

大家好，基本上我有两个 div，它们是两个页面，一个是主页，另一个页面应该在单击按钮时出现。

我的方法还不太行得通而且不正确，因为我希望每个 div 的宽度和高度和屏幕都是 100%，但是当我使用 px 时它可以工作。我该怎么做才能不必使用像 px 这样的绝对值来代替百分比？

到目前为止，这是我的 CSS:

html, body {
    margin: 0;
    padding: 0;
}

#container {
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden
}

#inner {
    position: relative;
    width: 800px; 
}

#home {
    position:absolute;
    width: 1300px;
    height: 1000px;
    background-color: red;
}

#member-home {
    position:absolute;
    left:1300px;
    width: 1000px;
    height: 1000px;
    background-color: green;
}

这是 jquery:

function toggleDivs() {
    var $inner = $("#inner");

    // See which <divs> should be animated in/out.
    if ($inner.position().left == 0) {
        $inner.animate({
            left: "-1300px"
        });
    }
    else {
        $inner.animate({
            left: "0px"
        });
    }

}
$( document ).ready(function() {
$("button").bind("click", function() {
    toggleDivs();
});
 });

和 html:

<div id="container">
    <div id="inner">
        <div id="home">
            <button>Click</button>
        </div>
        <div id="member-home">
            <button>Click</button>
        </div>
    </div> 
</div>

这是我网站的想法(一个从左到右滚动的整页网站): https://www.youtube.com/watch?v=SZTiJmclaRc

Answer 1

将容器的宽度设置为 200%，将两个内部设置为 50%，并使它们 float 。

http://jsfiddle.net/jonigiuro/TRk8U/

您可以使用类和转换来避免 jquery 动画:

var Slider = function() {
    this.$container = $('.container');

    this.init = function() {
        var self = this;
        $('.next').on('click', function(e) {
            e.preventDefault();
            self.$container.addClass('shifted');
        });

        $('.prev').on('click', function(e) {
            e.preventDefault();
            self.$container.removeClass('shifted');
        });
    }
    this.init();
}

var slider = new Slider();

还有 CSS:

.container {
    margin-left: 0;
    height: 100%;
    width: 200%;
    min-height: 100%;
    -webkit-transition: margin-left ease 500ms;
    -moz-transition: margin-left ease 500ms;
    -o-transition: margin-left ease 500ms;
    transition: margin-left ease 500ms;
}

.container.shifted {
     margin-left: -100%;
}

.page {
    width: 50%;
    height: 100%;
    min-height: 100%;
    float: left;
}