其他分享
首页 > 其他分享> > 仿三星-鼠标移入与移出动画（Html+Css+Js）

仿三星-鼠标移入与移出动画（Html+Css+Js）

作者：互联网

 

实现的功能：

鼠标移入切换对应图片，并自身改变样式

可以自己增加过渡动画，会更舒服些。

上代码：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>explore</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .explore {
            width: 1440px;
            margin: 0 auto;
        }

        .explore h2 {
            font-size: 38px;
            text-align: center;
            margin-bottom: 140px;
        }

        .explore .imglist {
            position: relative;
        }

        .explore .imglist li {
            position: absolute;
            overflow: hidden;
        }

        .explore .imglist li img {
            transition: all .3s;
        }

        .explore .imglist li img:hover {
            transform: scale(1.1);
        }

        .explore .imglist>.active {
            z-index: 1;
        }

        .explore article {
            display: flex;
            width: 684px;
            border-top: 2px black;
            padding: 30px 0 0 20px;
            cursor: pointer;
            margin: 20px 0 20px 710px;
        }

        .explore article span {
            margin-right: 55px;
        }

        .explore article div p {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 40px;
        }

        .explore article div a {
            display: table;
            font-size: 14px;
            font-weight: 700;
            color: #000;
            margin-bottom: 30px;
            display: none;
        }
    </style>
</head>

<body>
    <section class="explore">
        <h2>Explore #DoWhatYouCant</h2>

        <ul class="imglist">
            <li class="active"><img src="./images/explore/explore-00.jpg" alt=""></li>
            <li><img src="./images/explore/explore-01.jpg" alt=""></li>
            <li><img src="./images/explore/explore-02.jpg" alt=""></li>
        </ul>

        <article class="explorelist">
            <span>01</span>
            <div>
                <p>当Samsung Galaxy遇见Maison Kitsuné小狐狸</p>
                <a href="#">了解更多</a>
            </div>
        </article>
        <article class="explorelist">
            <span>02</span>
            <div>
                <p>开箱一刻，探索无限</p>
                <a href="#">了解更多</a>
            </div>
        </article>
        <article class="explorelist">
            <span>03</span>
            <div>
                <p>塑造一个更美好的地球</p>
                <a href="#">了解更多</a>
            </div>
        </article>
    </section>
</body>
<script>
    let explore = document.getElementsByClassName("explore")[0];
    let explorelist = explore.getElementsByClassName("explorelist");
    let alist = explore.getElementsByTagName("a");
    let imglist = explore.getElementsByTagName("li");
    for (let i = 0; i < explorelist.length; i++) {
        explorelist[i].addEventListener("mouseover", function () {
            for (let j = 0; j < explorelist.length; j++) {
                alist[j].style.display = "none";
                explorelist[j].style.borderTopStyle = "none";
                imglist[j].classList.remove("active");
            }
            if (this == explorelist[i]) {
                alist[i].style.display = "block";
                explorelist[i].style.borderTopStyle = "solid";
                imglist[i].classList.add("active");
            }
        });
    }
</script>

</html>

标签：imglist,Js,explore,Html,let,explorelist,font,margin,Css
来源： https://blog.csdn.net/A_home/article/details/121973103