これは私の最初の質問です (最初に検索して何時間も閲覧しました)
だから私は、私が見つけたこのjsfiddleに基づいてオフセットセクションをスライドさせる1ページのサイトを構築しようとしています: http://jsfiddle.net/jtbowden/ykbgT/ jtbowdenの功績!
<div id="container">
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
</div>
CSS:
body {
padding: 0px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 50%;
top: 100px;
margin-left: -25%;
}
#box1 {
background-color: green;
left: -150%;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
left: 150%;
}
js:
$('.box').click(function() {
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('#container').width()) {
$(this).animate({
left: '50%',
}, 500 );
} else {
$(this).animate({
left: '-150%',
}, 500 );
}
});
});
それはまさに私が望むことですが、セクションを追加すると、お互いのコンテンツを食べ始め、「コンテナ」が1つしかない場合のように「div1」に戻らないことを除いて、基本的に何が起こっているのか: http:/ /jsfiddle.net/cody32x/MTvG8/ 各セクションの名前を変更し、各セクションに新しい関数を作成しようとしましたが、わかりません!
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>
<div id="box6" class="box">Div #1</div>
<div id="box7" class="box">Div #2</div>
<div id="box8" class="box">Div #3</div>
<div id="box9" class="box">Div #4</div>
<div id="box10" class="box">Div #5</div>
</div>
<div id="container2">
<div id="box1" class="box">2-Div #1</div>
<div id="box2" class="box">2-Div #2</div>
<div id="box3" class="box">2-Div #3</div>
<div id="box4" class="box">2-Div #4</div>
<div id="box5" class="box">2-Div #5</div>
<div id="box6" class="box">2-Div #1</div>
<div id="box7" class="box">2-Div #2</div>
<div id="box8" class="box">2-Div #3</div>
<div id="box9" class="box">2-Div #4</div>
<div id="box10" class="box">2-Div #5</div>
</div>
CSS:
body {
padding: 0px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
cursor: pointer;
}
#container2 {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
top: 300px;
overflow: hidden;
cursor: pointer;
}
.box {
position: absolute;
width: 100%;
height: 100px;
line-height: 100px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 200%;
top: 100px;
margin-left: -50%;
}
#box1 {
background-color: green;
left: 50%;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
}
#box5 {
background-color: blue;
}
#box6 {
background-color: black;
}
#box7 {
background-color: gray;
}
#box8 {
background-color: blue;
}
#box9 {
background-color: red;
}
#box10 {
background-color: aqua;
}
js:
$('.box').click(function() {
$(this).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
left: '50%'
}, 500);
});
本当にありがとう!ここに正しく投稿していない場合は申し訳ありません... 私は新しいです。