[英]Sliding div's and stacking them (JavaScript)
我正在制作自己的網站,但遇到了一些困難。 這就是我的代碼現在的樣子 ,我想要做的是在“主頁”框的正下方有“關於”框,並使上面的框向下滑動,並帶有單擊“主頁”框時的描述。 我該怎么辦?
這是我的JS文件的代碼。
$(document).ready(function (event) {
var clicked=false;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": -40}); //Slides upwards 40pixels
}
else
{
clicked=true;
$(".two").css({"top": 0}); //Slides righ under "one"
}
});
var clicked2=false;
$(".three").on('click', function(){
if(clicked2)
{
clicked2=false;
$(".four").css({"top": -100}); //Slides upwards 40pixels
}
else
{
clicked2=true;
$(".four").css({"top": 0}); //Slides righ under "one"
}
});
});
從一個完整的旁注來看,我如何才能使這些框從頁面頂部開始,以及如何使他的框成為一個巨大的框評級器,而不是一小塊彩色的框?
您可以嘗試以下一種方法:
.container {
overflow:hidden;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
.three{
position: relative;
top: 0;
background-color: #E9A1B9;
z-index: 1;
cursor:pointer;
}
.four {
position: relative;
top: -18px;
background-color: #02C9C9;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
我將使用負邊距並在.one
和.three
div上切換一個簡單的.open
類:
$(".one, .three").click(function(){
$(this).toggleClass('open');
});
CSS:
.one, .three {
margin-bottom: -40px;
-webkit-transition: margin-bottom 1s;
-moz-transition: margin-bottom 1s;
-o-transition: margin-bottom 1s;
transition: margin-bottom 1s;
}
.open {margin-bottom: 0}
您可以使用jQuery toggle()函數為您完成一些工作,以簡化此操作。 (編輯:您也可以使用slideToggle()獲得不同的效果)
$(selector).toggle(speed,callback);
可選的speed參數可以采用以下值:“ slow”,“ fast”或毫秒。
可選的回調參數是在toggle()完成之后要執行的函數。
HTML
<div class="container">
<div class="one">Main</div>
<div class="two" style="display: none">Welcome to my page!</div>
<div class="three">About</div>
<div class="four" style="display: none">All about me</div>
</div>
CSS
.one {
background-color: #FFC300;
cursor:pointer;
}
.two {
background-color: yellow;
}
.three{
background-color: #E9A1B9;
cursor:pointer;
}
.four {
background-color: #02C9C9;
}
JS
$(document).ready(function (event) {
$(".one").on('click', function(){
$(".two").toggle("slow");
});
$(".three").on('click', function(){
$(".four").toggle("slow");
});
});
DEMO:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.