簡體   English   中英

滑動div並將其堆疊(JavaScript)

[英]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}

jsFiddle演示

您可以使用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:

https://jsfiddle.net/qbuatjrm/4/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM