前端html，css 样式巩固1

想做这样一个效果点击图片切换当前的选中图片

我们使用原生的js html 来开发这个

直接粘贴代码

相信大家都能看懂的

<!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>
        @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Muli', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
            margin: 0;
        }

        .container {
            display: flex;
            width: 90vw;
        }

        .panel {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 80vh;
            border-radius: 50px;
            color: #fff;
            cursor: pointer;
            flex: 0.5;
            margin: 10px;
            position: relative;
            -webkit-transition: all 700ms ease-in;


        }

        .panel h3 {
            font-size: 24px;
            position: absolute;
            bottom: 20px;
            left: 20px;
            margin: 0;
            opacity: 0;
        }




        .panel.active {
            flex: 5;

        }

        .panel.active h3 {
            opacity: 1;
            transition: opacity 0.5s ease-in 0.4s;
        }

        @media (max-width: 480px) {
            .container {
                width: 100vw;
            }

            .panel:nth-of-type(4),
            .panel:nth-of-type(5) {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="panel active"
            style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80')">
            <h3>Explore The World</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80')">
            <h3>Wild Forest</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1353&amp;q=80')">
            <h3>Sunny Beach</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1351&amp;q=80')">
            <h3>City on Winter</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80')">
            <h3>Mountains - Clouds</h3>
        </div>

    </div>
    <script>
        const panels = document.querySelectorAll(".panel")
        panels.forEach(panel => {
            panel.addEventListener("click", () => {
                removeActiveClassess()
                panel.classList.add("active")
            })
        })

        function removeActiveClassess() {
            panels.forEach(panel => {
                panel.classList.remove("active")
            })
        }


    </script>

</body>

</html>

  <script>
        const panels = document.querySelectorAll(".panel")
        panels.forEach(panel => {
            panel.addEventListener("click", () => {
                removeActiveClassess()
                panel.classList.add("active")
            })
        })

        function removeActiveClassess() {
            panels.forEach(panel => {
                panel.classList.remove("active")
            })
        }


    </script>

这个是重点代码需要点击事件如果小伙伴经常不写js 代码可能就不会写了再复习一下把

这个就是全部代码

大家可以体验一下看一下详细代码

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/894996.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！