1

好吧，这个很难解释首先这是我的完整代码-

<!DOCTYPE html>
<html>
<head>
<style>
body{
    margin: 0px;
    height: 100%;
}
#div{}
#eiv{}
#fiv{}
#giv{}
.main{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.main .sec1{
width:50%;
height:50%;
top:0%;
left:0%;
position:absolute;
background: #0e83cd;
}
.main .sec2{
width:50%;
height:50%;
top:0%;
left:50%;
position:absolute;
background: #7abe93;
}
.main .sec3{
width:50%;
height:50%;
top:50%;
left:0%;
position:absolute;
background: #f06060;
}
.main .sec4{
width:50%;
height:50%;
top:50%;
left:50%;
position:absolute;
background: #ffa366;
}
.main .active1{
    width: 100%;
    overflow: auto;
    height: 100%;
    background: #0e83cd;
    position: relative;
    z-index: 300;
}
.main .active2{
    width: 100%;
    overflow: auto;
    height: 100%;
    background: #7abe93;
    position: relative;
    z-index: 300;
}
.main .active3{
    width: 100%;
    overflow: auto;
    height: 100%;
    background: #f06060;
    position: relative;
    z-index: 300;
}
.main .active4{
    width: 100%;
    overflow: auto;
    height: 100%;
    background: #ffa366;
    position: relative;
    z-index: 300;
}
</style>
<script>
function myFunc1() {
    if(document.getElementById('div').className == 'sec1') {
        document.getElementById('div' ).className = 'active1';
        document.getElementById('div').style.webkitTransition ='all 0.5s';
    } else {
        document.getElementById("div").className = 'sec1';
        document.getElementById('div').style.webkitTransition ='all 0.5s';
    }
}
function myFunc2() {
    if(document.getElementById('eiv').className == 'sec2') {
        document.getElementById('eiv' ).className = 'active2';
        document.getElementById('eiv').style.webkitTransition ='all 0.5s';
    } else {
        document.getElementById("eiv").className = 'sec2';
        document.getElementById('eiv').style.webkitTransition ='all 0.5s';
    }
}
function myFunc3() {
    if(document.getElementById('fiv').className == 'sec3') {
        document.getElementById('fiv' ).className = 'active3';
        document.getElementById('fiv').style.webkitTransition ='all 0.5s';
    } else {
        document.getElementById("fiv").className = 'sec3';
        document.getElementById('fiv').style.webkitTransition ='all 0.5s';
    }
}
function myFunc4() {
    if(document.getElementById('giv').className == 'sec4') {
        document.getElementById('giv' ).className = 'active4';
        document.getElementById('giv').style.webkitTransition ='all 0.5s';
    } else {
        document.getElementById("giv").className = 'sec4';
        document.getElementById('giv').style.webkitTransition ='all 0.5s';
    }
}
</script>
</head>
<body>
<div class="main">
<div id="div" class="sec1" onclick="myFunc1()">blah</div>
<div id="eiv" class="sec2" onclick="myFunc2()">blah</div>
<div id="fiv" class="sec3" onclick="myFunc3()">blah</div>
<div id="giv" class="sec4" onclick="myFunc4()">blah</div>
</div>
</body>
</html>

我想要实现的是 - http://tympanus.net/Development/FullscreenLayoutPageTransitions/

我希望代码使标题出现并单击标题消失，并且内容会在一段时间（例如 0.5 秒）后显示，并且当您关闭它时（我希望关闭从十字符号发生，而不是 div 因为它现在这样做）内容消失，但标题在收回后出现（0.5秒）

4

0 回答 0