使用html+css+js實現頁面分割效果(學習 L01)

時間 2019-11-16
標籤使用 html+css+js html css 實現頁面分割效果學習 l01 欄目 HTML 简体版
原文原文鏈接
學習分割查看

效果如圖 ---html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>實現分割顯示效果</title>
    <style>
        /* 全局變量 */
        :root {
            --container-bg-color: #333;
            --left-bg-color: rgba(223, 39, 39, 0.7);
            --right-bg-color: rgba(43, 35, 35, 0.7);
            --left-button-hover-color: rgba(161, 11, 11, 0.3);
            --right-button-hover-color: rgba(92, 92, 92, 0.3);
            --hover-width: 75%;
            --other-width: 25%;
            --speed: 1000ms;
            --button-hover-border-color: rgba(236, 222, 14, 0.7);
        }

        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        .container {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: var(--container-bg-color);
        }

        .split {
            position: absolute;
            width: 50%;
            height: 100%;
            overflow: hidden;
        }

        .split.left {
            left: 0;
            background: url("./img/designer.jpg") center center no-repeat;
            background-size: cover;
        }

        .split.left::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background: var(--left-bg-color);
        }

        .split.right {
            right: 0;
            background: url("./img/programmer.png") center center no-repeat;
            background-size: cover;
        }

        .split.right::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background: var(--right-bg-color);
        }

        h1 {
            font-size: 4rem;
            color: #fff;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            top: 20%;
        }

        .button {
            position: absolute;
            display: block;
            font-weight: bold;
            text-decoration: none;
            border: #fff solid 0.2rem;
            color: #fff;
            left: 50%;
            transform: translateX(-50%);
            /* 左移-50% */
            top: 40%;
            text-align: center;
            padding-top: 1.3rem;
            font-size: 1rem;
            height: 2.5rem;
            width: 15rem;
            text-transform: uppercase;
            /* 大寫 */
        }

        .split.left .button:hover {
            background-color: var(--left-button-hover-color);
            border-color: var(--left-button-hover-color);
        }

        .split.right .button:hover {
            background-color: var(--right-button-hover-color);
            border-color: var(--right-button-hover-color);
        }


        /* hover-right and hover-left */
        .hover-left .left {
            width: var(--hover-width);
        }

        .hover-left .right {
            width: var(--other-width);
        }
        .hover-left .right::before {
            z-index: 2;
        }

        .hover-right .right {
            width: var(--hover-width);
        }

        .hover-right .left {
            width: var(--other-width);
        }
        .hover-right .left::before {
            z-index: 2;
        }

        /* 過分動畫效果 */

        .split.left, .split.right, .split.right::before, .split.left::before {
            transition: 1000ms all ease-in;
        }

        @media(max-width:800){
            h1{
                font-size: 2rem;
            }
            .button{
               width: 12rem; 
            }
        }
    </style>
</head>

<body>


    <div class="container">
        <div class="split left">
            <h1>The Designer</h1>
            <a href="#" class="button">read more</a>
        </div>
        <div class="split right">
            <h1>The Programmer</h1>
            <a href="#" class="button">read more</a>
        </div>

    </div>



    <script>
        const left = document.querySelector('.left'); // 獲取對象
        const right = document.querySelector('.right');
        const container = document.querySelector('.container');


        left.addEventListener("mouseenter", () => { // 添加鼠標進入時間
            container.classList.add("hover-left"); // 添加樣式
        });

        left.addEventListener("mouseleave", () => {
            container.classList.remove("hover-left"); // 刪除樣式
        });

        right.addEventListener("mouseenter", () => {
            container.classList.add("hover-right");
        });

        right.addEventListener("mouseleave", () => {
            container.classList.remove("hover-right");
        });


    </script>
</body>

</html>
````複製代碼