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

【问题标题】：How do you make a 2 divs(pages) scroll left and right with jQuery?如何使用 jQuery 使 2 个 div（页面）左右滚动？
【发布时间】：2014-06-11 22:29:14
【问题描述】：

大家好，基本上我有两个 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

【问题讨论】：

标签： javascript jquery html css

【解决方案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;
}

【讨论】：

【解决方案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

【讨论】：