会扩展的图片

2021/10/23 23:17:00

编程Tag： 图片 expand 扩展 flex background Opacity pic classList

本文主要是介绍会扩展的图片，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

先上效果图
在这里插入图片描述
上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会展开的画</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            height: 100vh;
        }
        .container{
            display: flex;
            height: 80vh;
            width: 80vw;
        }
        .pic{
            /*子绝父相*/
            position: relative;
            color: #fff;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            margin: 10px;
            border-radius: 50px;
            flex: 0.5;
            transition: all 0.7s ease-in;
        }
        .pic h3{
            font-size: 20px;
            position: absolute;
            left: 20px;
            bottom: 20px;
            opacity: 0;
        }
        .pic.expand{
            flex:5;
        }
        .expand h3{
            opacity: 1;
            transition: opacity 0.3s ease-in 0.4s;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="pic expand" style="background-image: url('../images/sunnybeach.jpg')">
            <h3>Sunny Beach</h3>
        </div>
        <div class="pic" style="background-image: url('../images/explortheworld.jpg')">
            <h3>Explore The World</h3>
        </div>
        <div class="pic" style="background-image: url('../images/wildforest.jpg')">
            <h3>Wild Forest</h3>
        </div>
        <div class="pic" style="background-image: url('../images/cityonthewater.jpg')">
            <h3>City On Water</h3>
        </div>
        <div class="pic" style="background-image: url('../images/mountains.jpg')">
            <h3>Mountains</h3>
        </div>
    </div>
    <script>
        const pics=document.querySelectorAll(".pic");

        pics.forEach((item)=>{
            item.addEventListener("click",clickHandler)
        });
        function clickHandler(e){
            if (!e.target.classList.contains("expand")){
                const cur=document.querySelector(".expand");
                cur.classList.remove("expand");
                e.target.classList.add("expand");
            }
        }
    </script>
</body>
</html>

路漫漫其修远兮，吾将上下而求索~

这篇关于会扩展的图片的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

会扩展的图片

相关编程文章