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％并使它们浮动。

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;
}

Answer 2

以下是家庭和其他页面可以使用100％宽度和高度的解决方案。您还需要激活Jquery UI以获得我在答案中使用的效果。

<强> HTML

 <div id="container">
<div id="inner">
    <div id="home">
        <button>Click</button>
    </div>
    <div id="member-home" style="display:none">
        <button>Click</button>
    </div>
</div> 
</div>

<强> JQUERY

 $("button").click(function(){   
    var hideoptions = {  "direction" : "left",  "mode" : "hide"};
    var showoptions = {"direction" : "right","mode" : "show"};

    $("#home").toggle("slide", hideoptions, 1000);
    $("#member-home").toggle("slide", showoptions, 1000);

 });

<强> CSS

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

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

#inner {
position: relative;
width:100%; 
height:100%;
}

#home {
position:absolute;
width:100%;
height:100%;
background-color: red;
}

#member-home {
position:absolute;
width: 100%;
height:100%;
background-color: green;
}

Working JSFIDDLE DEMO

如何使用jQuery左右滚动2个div（页面）？

2 个答案: