html transtion 过渡

最新推荐文章于 2024-08-16 20:24:29 发布

NAUR.

最新推荐文章于 2024-08-16 20:24:29 发布

阅读量131

点赞数 2

文章标签： css js dom css3 sms

本文链接：https://blog.csdn.net/weixin_46622106/article/details/110808952

版权

html transtion 过渡

代码片.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            overflow: hidden;
        }
        div{
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            padding-top: 35%;
            transition: all 2s;
        }
        #div1{
            background: rgb(236, 151, 90);
            left: 0;
        }
        #div2{
            background: darkcyan;
            left: 100%;
        }
        a{
            text-decoration: none;
            font-size: 30pt;
            font-weight: bolder;
            color: white;
        }

        #div1.move{
            left: -100%;
        }
        #div2.move{
            left: 0;
        }
    </style>
    <script>
        window.onload = function () {
            let list = document.querySelectorAll('a');

            for(let a of list){
                a.onclick = function(){
                    event.preventDefault();
                    toggleClass('div1','move');
                    toggleClass('div2','move');
                }
            }

            function toggleClass(id,className){
                let dom = document.querySelector('#' + id);
                if(dom.className == className){
                    dom.className = '';
                }else{
                    dom.className = className;
                }
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <a href="#div2">next</a>
    </div>
    <div id="div2">
        <a href="#div1">last</a>
    </div>
</body>
</html>

NAUR.

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html transtion 过渡

html transtion 过渡代码片.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
复制链接

扫一扫