jquery改写手风琴特效

最新推荐文章于 2024-10-10 10:50:43 发布

浮生不觉梦

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量92

点赞数

分类专栏： JavaScript 文章标签： js html jquery javascript css

本文链接：https://blog.csdn.net/weixin_44017079/article/details/115563130

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文件目录

别忘记引入jquery，img随便放4张图片
在这里插入图片描述

HTML和JS代码

背景淡入淡出引入了animate.css，不影响整体特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="../animate.css">
    <script src="../../day24/jquery-ui/jquery-3.1.0.js"></script>
</head>
<body>
    <div class="bg"></div>
    <div class="bg"></div>
    <div class="bg"></div>
    <div class="bg bg-active"></div>

    <div class="main">
        <ul>
            <li><div><p>英雄联盟</p></div></li>
            <li><div><p>CS : GO</p></div></li>
            <li><div><p>使命召唤</p></div></li>
            <li class="li-active"><div><p>黑暗之魂</p></div></li>
        </ul>
    </div>
</body>
<script>
    $(function () {
        /*获取所有li，并遍历*/
        $("li").each(function (index, element) {
            /*给每个li绑定悬浮事件*/
            $(element).mouseover(function () {
                $("li").each(function (i, el) {
                    /*去除li的样式*/
                    $(el).removeAttr("class");
                    /*去除bg的样式*/
                    $(".bg").eq(i).removeClass("bg-active");

                });
                $(this).addClass("li-active");
                $(".bg").eq(index).addClass("bg-active");
                /*背景淡入*/
                $(".bg").eq(index).addClass("animated fadeIn");
                /*$(".bg").eq(index).addClass("animated fadeOut");*/
            });
        });
    });
</script>
</html>

index.css

* {
    margin: 0;
    padding: 0;
}

html, body, .bg {
    height: 100%;
    width: 100%;
}

body {
    position: relative;
}

.bg {
    display: none;
}

.bg:nth-child(1) {
    background: url("../img/1.jpg") no-repeat center/cover;
}

.bg:nth-child(2) {
    background: url("../img/2.jpg") no-repeat center/cover;
}

.bg:nth-child(3) {
    background: url("../img/3.jpg") no-repeat center/cover;
}

.bg:nth-child(4) {
    background: url("../img/4.jpg") no-repeat center/cover;
}

.bg-active {
    display: block;
}

.main {
    position: absolute;
    width: 1000px;
    height: 400px;
    /*background-color: deeppink;*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.main ul {
    list-style: none;
}

.main ul li {
    float: left;
    width: 100px;
    height: 400px;
    transition: all 1s;
}

.main ul li.li-active {
    width: 700px;
}

.main ul li:nth-child(1) {
    background: url("../img/1.jpg") no-repeat center/cover;
}

.main ul li:nth-child(2) {
    background: url("../img/2.jpg") no-repeat center/cover;
}

.main ul li:nth-child(3) {
    background: url("../img/3.jpg") no-repeat center/cover;
}

.main ul li:nth-child(4) {
    background: url("../img/4.jpg") no-repeat center/cover;
}

.main ul li div {
    height: 400px;
    width: 100px;
    /*background-color: black;*/
    /*opacity: 0.5;*/

    background-color: rgba(0, 0, 0, .5);
}

.main ul li div p {
    color: #ffffff;
    padding: 40px;
    opacity: 0.5;
}