能不能不要局限思维呀！！！！！！_html-js-css

概述<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>d出收缩</title> <style> body { width: 100%; height: 100%; margin: 0;

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>d出收缩</Title>
    <style>
        body {
            wIDth: 100%;
            height: 100%;
            margin: 0;
            background: antiquewhite;
        }

        #cont {
            text-align: center;
            position: absolute;
            top:0;
        }

        .xs,.yc {
            wIDth: 100%;
            height: 100px;
            background: bisque;
            Transition: top 1.5s;
        }


        #nav {
            wIDth: 800px;
            height: 50px;
            background: aquamarine;
            margin: auto;

        }

        .up {
            Font-size: 40px;
            color: white;
            cursor: pointer;
            display: inline-block;
        }

        .down {
            transform: rotate(180deg);
            Font-size: 40px;
            color: white;
            cursor: pointer;
            display: inline-block;
        }
    </style>
</head>
<body>
<div ID="cont" >
    <div ID="nav">

    </div>
    <span ID="up" onclick="upx()" >^</span>
</div>
</body>
<script>{
    let nav = document.getElementByID("nav");
    let up = document.getElementByID("up");
    let cont = document.getElementByID("cont");

    function upx() {

        if (up.classname === "down") {
            down();
        } else {
            cont.style.top = "-50px";
            up.classname = "down";
            cont.classname = "yc";
        }
    }

    function down() {
        cont.style.top = "0";
        up.classname = "up";
        cont.classname = "xs"
    }


}
</script>
</HTML>



今天李先生心血来潮，虐了一把我这个菜虫~~~~久不写手生。写了一个点击

箭头div隐藏显示的效果，我傻的很 一直在嗑高度，忘记了还有top，菜虫路漫漫，写出来提醒下自己。忧桑~~~~

总结

以上是内存溢出为你收集整理的能不能不要局限思维呀！！！！！！全部内容，希望文章能够帮你解决能不能不要局限思维呀！！！！！！所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1081825.html

能不能不要局限思维呀！！！！！！

发表评论

评论列表（0条）