大家好,基本上我有两个 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
最佳答案
将容器的宽度设置为 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;
}
关于javascript - 如何使用 jQuery 左右滚动 2 个 div(页面)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24164873/