Beispiele für die Anzeigeimplementierung von Ein- und Ausblendeffekten in CSS-CSS-Tutorial-php.cn

Beispiele für die Anzeigeimplementierung von Ein- und Ausblendeffekten in CSS

黄舟

Freigeben： 2017-10-27 10:24:14

Original

7139 Leute haben es durchsucht

AnzeigeEin- und Ausblenden realisierenÜbergangseffekt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            position: relative;
        }
        input {/*按钮样式*/
            cursor: pointer;
            border: none;
            outline: none;
            background: #34BC9D;
            color: #fff;
            height: 40px;
        }
        img {
            position: absolute;
            transition: 1s;
            left: 0;
            top: 100%;
            opacity: 0;
            cursor: pointer;
            display: none;
        }
    </style>
</head>
<body>
    <p>
        <input id="root" type="button" onclick="show()" value="点击显示图片">
        <img id="img" src="http://www.qianduanzhan.com/zb_users/upload/2017/07/201707161500184837405094.png" alt="">
    </p>
<script>
    var root = document.getElementById("root");
    var img = document.getElementById("img");
    function show(){
        if(root.value === "点击显示图片"){
            root.value = "点击隐藏图片";
            /*设置setTimeout，让display先执行，opacity后执行*/
            img.style.display = "block";
            setTimeout(function () {
                img.style.opacity = 1;
            },.1);
        }else{
            root.value = "点击显示图片";
            img.style.opacity = 0;
            /*隐藏需要先执行opacity，再执行display，否则无效*/
            setTimeout(function () {
                img.style.display = "none";
            },900);
        }
    }
</script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeispiele für die Anzeigeimplementierung von Ein- und Ausblendeffekten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!