Html5 之过渡

编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html5过渡---（11.24）</title>
    <style>
        body { 
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            /* position: absolute; */
            /* overflow: hidden; */

        }
        div {
            width: 100%;
            height: 100%;
            position: absolute;
            transition:all 1s linear ;
        }
        #div1 {
            background-color:yellowgreen;
            left: 0;
        }
        #div2{
            background-color:hotpink;
            left: 100%;
        }
        div a{
            font-weight: bold;
            font-size:50px;
            text-decoration:none;
            position: absolute;
            text-align: center;
            left: 70%;
            bottom: 20px;
        }
        /* 事件 */
        #div1.move{
            left: -100%;
        }
        #div2.move{
            left: 0;
        }

    </style>

    
    <script>
        window.onload=function(){
            let list =document.querySelectorAll('a');
            for (element of list){
                element.onclick=function(){
                    event.preventDefault();
                    let div1= document.querySelector('#div1');
                    let div2= document.querySelector('#div2');
                    toggClass(div1, 'move');
                    toggClass(div2, 'move');
                }
            }
            function toggClass(dom,cls){
                if(dom.classList.contains(cls)){
                    dom.classList.remove(cls);
                }
                else{
                    dom.classList.add(cls);
                }
            }
        }

        
    </script>
</head>
<body>
    <div id="div1">
        <a href="#div2">next1</a>
    </div>
    <div id="div2">
        <a href="#div1">next2</a>
    </div>
</body>
</html>

运行结果


posted @ 2021-08-15 17:41  阿向向  阅读(81)  评论(0)  编辑  收藏  举报